如何使用CSS在HTML的div元素中垂直居中显示图像？
如何使用CSS在HTML的div元素中垂直居中显示图像？
提问于 2010-02-10 22:53:15
我有一个这样的标记：
<div>
<img />
</div>div高于img：
div {
height: 100px;
}
img {
height: dynamic-value-smaller-than-100px;
}我需要图像在div的中间(在上面和下面有相同大小的空白)。
我试过了，但不起作用：
div {
vertical-align: middle;
}回答 15
Stack Overflow用户
回答已采纳
发布于 2010-02-10 22:56:07
如果您的图像纯粹是装饰性的，那么将其用作背景图像可能是一种更具语义的解决方案。然后可以指定背景的位置
background-position: center center;如果它不是装饰性的，并且构成了有价值的信息，那么img标记就是合理的。在这种情况下，您需要使用以下属性设置包含div的样式：
div{
display: table-cell; vertical-align: middle
}Read more about this technique here。报告在IE6/7上不工作(在IE8上工作)。
Stack Overflow用户
发布于 2013-01-17 23:37:26
另一种方法是在容器div中设置行高，并使用vertical- align : middle将图像与行高对齐。
html：
<div class="container"><img></div>css：
.container {
width: 200px; /* or whatever you want */
height: 200px; /* or whatever you want */
line-height: 200px; /* or whatever you want, should match height */
text-align: center;
}
.container > img {
vertical-align: middle;
}我都想不起来了。但是我以前用过这个--它应该能起到作用。同样适用于较老的浏览器。
Stack Overflow用户
发布于 2013-01-07 01:40:14
假设你想把图片(40px X 40px)放在div class="box“的中心(水平和垂直)。因此，您具有以下html：
<div class="box"><img /></div>你要做的就是应用CSS：
.box img {
position: absolute;
top: 50%;
margin-top: -20px;
left: 50%;
margin-left: -20px;
}你的div甚至可以改变它的大小，图像总是在它的中心。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2237636
复制相关文章
相似问题