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

Question

我目前正在使用图像容器（下）

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

此代码水平居中 div 就好了，但我不知道如何设置自动垂直对齐。有什么建议吗？

Answer 1

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

最简单的是将 and 结合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用来告诉图像将其中点与线的中点对齐。

文档

• line-height- https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
• vertical-align- https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

Answer 2

您需要设置text-align:center容器和容器line-height:120px的高度，然后vertical-align:middle在img容器中设置。

jsFiddle

HTML

<div class="image_container">
    <img src="http://placehold.it/70x70"/>
</div>

CSS

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

    background:green;

    line-height:120px;
    text-align:center;
}

.image_container img{
    vertical-align:middle;
}

Answer 3

尝试这个，

.image_container {
    width:400px;
    height: 500px;
    background:#000;
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

http://jsfiddle.net/ka8Hw/3/