css - Bootstrap 缩略图中的垂直居中约束图像

Question

使用 Twitter Bootstrap ，我正在尝试创建一个水平滚动系列 thumbnails这允许在显示缩略图的行内使用滚动条，如下所示:

使用这个 HTML，这让我完成了大部分工作:

<div class="row">Hello there</div>
<div class="row" style="overflow-x:scroll">
<table>
    <tr>
        <td>
            <div class="thumbnail" style="width: 400px; height: 400px">
                <img src="http://i.minus.com/iucsUZfSM9v45.gif"/>
            </div>
        </td>
        <td>
            <div class="thumbnail" style="width: 400px; height: 400px">
                <img src="http://i.minus.com/iucsUZfSM9v45.gif"/>
            </div>
        </td>
        <td>
            <div class="thumbnail" style="width: 400px; height: 400px">
                <img src="http://i.minus.com/iucsUZfSM9v45.gif"/>
            </div>
        </td>
    </tr>
</table>
</div>

JSFiddle:http://jsfiddle.net/54fgv/2/

overflow CSS 属性非常有用，它为我提供了容器 div 的滚动条。

缩略图 div 元素将具有固定大小，这很可能会小于图像。在这种情况下，图像被限制为相应地适合。正如您所看到的，当图像比缩略图宽时，宽度设置为缩略图并且高度相应地缩放。这是我想要的行为，但我希望图像在缩略图中垂直居中。

我试过将 vertical-align: middle 添加到缩略图 div 元素，但无济于事。

如何让图片在缩略图内垂直居中？

Answer 1

方法 1 - (example) :

包装 img 元素:

<div class="thumbnail" style="width: 400px; height: 400px">
    <div class="thumbnail_wrapper">
        <img src="http://i.minus.com/iucsUZfSM9v45.gif"/>
    </div>
</div>

将 .thumbnail 元素的显示更改为 table。使用 border-collapse: separate 修复填充/间距问题。将包装器的显示更改为 table-cell，然后添加 vertical-align: middle。最后，为 img 元素指定 100% 的宽度。

Example Here

.thumbnail {
    display:table;
    border-spacing: 2px;
    border-collapse: separate;
    border-radius:10px; /* Demonstrational.. */
}
.thumbnail_wrapper {
    display:table-cell;
    vertical-align:middle;
}
.thumbnail_wrapper > img {
    width:100%;
}

---

方法 2 - (example) :

flexbox 方法不需要 wrapper 元素，但是它有 slightly less support比 table/table-cell 方法。

<div class="thumbnail" style="width: 400px; height: 400px">
    <img src="http://i.minus.com/iucsUZfSM9v45.gif" />
</div>

基本上，只需将 .thumbnail 元素的 display 更改为 flex 然后添加 align-items: center。添加所有其他供应商前缀以支持跨浏览器。阅读更多有关 flexbox 布局和属性的信息 here - (mdn).

Example Here

.thumbnail {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

---

作为旁注，您可以避免使用 HTML 表格 - example here .