Question

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

enter image description here

这让我大部分都在那里，使用这个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方法并不需要包装元素，但它的slightly less support方法比table / table-cell方法要快{。}}。

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

基本上，只需将display元素的.thumbnail更改为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。

Answer 2

HTML：

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

CSS：

.v_align_all { white-space: nowrap }

.v_align_all > * {
    vertical-align: middle;
    display: inline-block !important;
}

.v_align_fix {
    height: 100%;
    vertical-align: middle;
    display: inline-block;
    width: 0px;
    white-space: nowrap;
}

在Bootstrap缩略图中垂直居中约束图像

2 个答案: