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

Question

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

这让我大部分都在那里,使用这个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/

该overflowCSS属性的伟大工程,给我的容器滚动条div.

缩略图div元素将是固定大小,这可能比图像小.在这种情况下,图像被约束以相应地适合.如您所见,当图像比缩略图宽时,宽度设置为缩略图,并相应地缩放高度.这是我想要的行为,但我想让图像垂直居中在缩略图中.

我已经尝试添加vertical-align: middle缩略图div元素,但无济于事.

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

Answer 1

方法1 - (示例):

包裹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%.

这里的例子

.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将.thumbnail元素更改为flex然后添加即可align-items: center.添加所有其他供应商前缀以用于跨浏览器支持.在此处阅读有关flexbox布局和属性的更多信息- (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表格 - 例如此处.