Question

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

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; }

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

2 个答案: