gpt4 book ai didi

css - 是否可以在 div 中垂直自动居中元素?

转载 作者:太空宇宙 更新时间:2023-11-04 05:03:18 24 4
gpt4 key购买 nike

我有一个在线照片库。缩略图页面是一个 150px x 150px div 的网格,缩略图图像设置在其中。

由于缩略图是矩形的,理想的做法是将它们自动居中放置在 div 中。

读到这里,我知道了如何将它们水平居中。我也一直在读到,在 CSS3 起飞之前,垂直居中是不可能的。这是真的吗?

我已经让水平图像自动居中了:

.portrait_t {
width: auto;
height: 150px;
text-align: center;
display: block;
margin: 0 auto 0 auto;
}

但是,垂直居中不适用于此:

.landscape_t {
width: 150px;
height: auto;
display: block;
margin: auto 0 auto 0;
}

如果在 CSS3 之前没有办法做到这一点,那么我将不得不想出一个解决方法,但如果我遗漏了什么,请告诉我。

提前感谢大家的帮助!

最佳答案

您有一个内联元素(<img>),它位于大小为 <div> 的父元素内。元素:

<div>
<img />
</div>

您需要做的就是使其居中和居中对齐。你用 text-align:center; 居中在 parent <div>然后你通过给出 <div> 来中间对齐它line-height它的全高。此外,因为它是 <img>标记你给那个图像标记 vertical-align:middle;完成它就在那里,不管它自己的大小:

enter image description here

示例/Demo :

<style>
div {width:350px; height:350px; line-height:350px; text-align:center;}
div img {vertical-align:middle;}​
</style>

<div>
<img src="http://i.imgur.com/PKnWs.jpg">
</div>
<div>
<img src="http://i.imgur.com/Az6NUl.jpg">
</div>

关于css - 是否可以在 div 中垂直自动居中元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11039625/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com