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

Using 推特引导程序，我正在尝试创建一个水平滚动的系列缩略图它允许在显示缩略图的行中使用滚动条，如下所示：

使用以下 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/

The overflowCSS 属性效果很好，为我提供了容器的滚动条div.

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

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

如何使图像在缩略图内垂直居中？

方法一 - （例子）:

包裹住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. Use border-collapse: separate修复填充/间距问题。将包装器的显示更改为table-cell然后添加vertical-align: middle。最后，给出img元素宽度为100%.

示例在这里

.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 - （例子）:

Flexbox 方法不需要包装元素，但是它有支持稍少比table/table-cell方法。

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

基本上，只需更改display of the .thumbnail元素到flex然后添加align-items: center。添加所有其他供应商前缀是为了跨浏览器支持。阅读有关 Flexbox 布局和属性的更多信息here-（MDN）。

示例在这里

.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 表格 -例子在这里.