垂直对齐div中的图像
垂直对齐div中的图像
提问于 2012-04-04 17:44:54
我对div中的图像垂直对齐有问题
.img_thumb {
float: left;
height: 120px;
margin-bottom: 5px;
margin-left: 9px;
position: relative;
width: 147px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 3px;
}
.img_thumb img {
display: block;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
}
<div class="img_thumb">
<a class="images_class" href="large.jpg" rel="images"><img src="small.jpg" title="img_title" alt="img_alt" /></a>
</div>据我所知，我需要"display: block;“来将图像定位在中心位置，这是可行的。另外，在教程中我找到了许多答案，但它们并不“有用”，因为我所有的图像都不是在同一高度！
回答 1
Stack Overflow用户
发布于 2012-04-04 18:34:50
当你需要垂直对齐行内元素和块元素时，你不需要定义位置，你可以采用下面提到的想法：
inline-elements :- <img style="vertical-align:middle" ...>
<span style="display:inline-block; vertical-align:middle"> foo<br>bar </span>
block-elements :- <td style="vertical-align:middle"> ... </td>
<div style="display:table-cell; vertical-align:middle"> ... </div>查看演示：- http://jsfiddle.net/Ewfkk/2/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10008670
复制相关文章
相似问题