Question

我正在尝试垂直居中放置在固定宽度和高度li的图像。我的基本HTML是：

<ul class="list">
    <li class="list-item">
        <div>
            <img src="http://lorempixel.com/400/200" />
        </div>
    </li>
    <li class="list-item">
        <div>
            <img src="http://lorempixel.com/400/200" />
        </div>
    </li>
    <li class="list-item">
        <div>
            <img src="http://lorempixel.com/400/200" />
        </div>
    </li>
    <li class="list-item">
        <div>
            <img src="http://lorempixel.com/400/200" />
        </div>
    </li>
</ul>

我的基本CSS是：

.list-item {
    float: left;
    list-style: none;
    width: 200px;
    height: 80px;
    box-sizing: border-box;
    padding: 10px;
    background-color: #63A578;
}

.list-item div {
    overflow: hidden;
    text-align: center;
    height: 80px;
    width: 100%;
    line-height: 80px;
    border: 1px solid red;
}

.list-item img {
    height: auto;
    width: 100%;
    vertical-align: middle;
}

我尝试了this答案（和很多其他答案）的变体，直到容器变得小于图像高度。然后它停止垂直对齐并溢出它的容器（jsfiddle这里）。

所以基本上我希望将一个100％宽度的img垂直对齐在一个小于图像高度的固定高度容器中，而不会溢出。有什么想法吗？

Answer 1

将display: table-cell添加到图片中。

http://jsfiddle.net/d8zd7cyt/18/

更新：http://jsfiddle.net/d8zd7cyt/21/

具有100％宽度的垂直中心图像，具有固定尺寸

1 个答案: