html - 在固定容器中垂直居中图像

Question

我正在使用 wordpress 来动态显示图像。每个图像具有 186 像素的固定宽度和可变高度，具体取决于图像的比例。每个图像都位于一个方形框中，具有 15 像素的填充。默认情况下，图像显示在框的顶部。我正在寻找一种将图像垂直居中的方法，因为它的宽度是固定的，但高度是可变的。这是我的代码：

HTML：

<div class="logoContainer">
    <img src="/path/to/image.jpg" />
</div>

CSS：

.logoContainer {
    padding: 15px;
    background: #dddddc;
    margin-bottom: 10px;
    width: 186px;
    height: 186px;
}
.logoContainer img {
    max-width: 100%;
    height: auto;
}

我可以使用绝对定位，但在不知道图像的确切高度的情况下，很难完美居中。但是，我们确实知道容器盒的确切尺寸。想法？

Answer 1

试试这个 - http://jsfiddle.net/vLbRF/

.logoContainer {
    padding:15px;
    background:#dddddc;
    margin-bottom: 10px;
    width:186px;
    height:186px;
    line-height: 186px;
}

.logoContainer img {
    max-width: 100%;
    vertical-align: middle;
}

Answer 2

使用这种实现的技术vertical-align将允许您拥有动态高度的容器：

<div class="logoContainer">
    <span></span><img src="/path/to/image.jpg" />
</div>

CSS：

.logoContainer {
    padding:15px; 
    background:#dddddc; 
    margin-bottom: 10px; 
    width:186px; 
    height:186px; }
span {
    height: 100%;
    vertical-align: middle;
    display: inline-block;
.logoContainer img { 
    vertical-align: middle;
    display: inline-block; }