使用
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/
溢出的CSS属性很好,给我容器div的滚动条.
缩略图div元素将是一个固定的大小,这可能会比图像更小.在这种情况下,图像被约束以相应地适应.您可以看到,当图像比缩略图宽时,宽度设置为缩略图,并相应地缩放高度.这是我想要的行为,但我想让图像在缩略图中垂直居中.
我已经尝试添加vertical-align：中间到缩略图div元素,但无济于事.
如何让图像在缩略图中垂直居中？
解决方法
方法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元素的显示更改为表.使用border-collapse：单独来修复填充/间距问题.将包装器的显示更改为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%;
}
flexBox方法不需要包装元素,但是它具有比表/表格单元方法更多的slightly less support.
<div class="thumbnail" style="width: 400px; height: 400px">
<img src="http://i.minus.com/iucsUZfSM9v45.gif" />
</div>
基本上,只需将.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表 – example here.
