css - 如何在响应页面大小调整的 .image_container 中垂直居中图像

Question

我目前正在使用图像容器(下图)

}
.image_container {
width: 570px;
height: 120px;
margin: 275px auto 0;
}

这段代码可以很好地将 div 水平居中，但我不知道如何设置自动垂直对齐。有什么建议吗？

Answer 1

只要您有静态高度可供使用，就可以使用几种垂直居中策略。

最简单的就是结合line-height和vertical-align: middle:

.image_container {
    width: 570px;
    height: 120px;
    margin: 275px auto 0;
    line-height: 120px;
}
.image_container img {
     vertical-align: middle;
}

<div class="image_container">
    <img src="http://jsfiddle.net/img/logo.png" />    
</div>

查看:http://jsfiddle.net/ka8Hw/1/ (注意:我删除了演示的最高边距)

line-height 规则是一种让内联元素将整个框的高度视为单行的 hacky 方式。图像会将框的中间视为需要对齐的线。但是，它会对齐，因此图像的底部位于中点。因此，我们使用 vertical-align:middle 告诉图像将其中点与直线的中点对齐。

文档

• 行高 - https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
• 垂直对齐 - https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align