Bootstrap 缩略图中的垂直居中约束图像 [英] Vertically center constrained image in Bootstrap thumbnail
问题描述
使用
overflow CSS 属性效果很好，为我提供了容器 div 的滚动条.
缩略图 div 元素将是固定大小，这很可能比图像小.在这种情况下，图像被限制为相应地适合.正如您所看到的，当图像比缩略图宽时，宽度设置为缩略图，高度相应地缩放.这是我想要的行为，但我希望图像在缩略图中垂直居中.
This gets me most of the way there, using this HTML:
我尝试将 vertical-align: middle 添加到缩略图 div 元素，但无济于事.
<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/
推荐答案
方法 1 - (示例):
包裹 img 元素:
How can I get the image to be centered vertically within the thumbnail?将 .thumbnail 元素的显示更改为 table.使用 border-collapse: separate 修复填充/间距问题.将包装器的显示更改为table-cell，然后添加vertical-align: middle.最后，给 img 元素一个 100% 的宽度.
<div class="thumbnail" style="width: 400px; height: 400px">
<div class="thumbnail_wrapper">
<img src="http://i.minus.com/iucsUZfSM9v45.gif"/>
</div>
</div>
Example Here<小时>
方法 2 - (示例):
flexbox 方法不需要包装器元素，但是它比 table 的支持略少/table-cell 方法.
Approach 2 - (example):
The flexbox approach doesn't require the wrapper element, however it has slightly less support than the table/table-cell approach.<div class="thumbnail" style="width: 400px; height: 400px">
<img src="http://i.minus.com/iucsUZfSM9v45.gif" />
</div>
基本上，只需将.thumbnail元素的display改为flex，然后添加align-items: center.添加所有其他供应商前缀以支持跨浏览器.在此处阅读有关 flexbox 布局和属性的更多信息 -(mdn).
Example Here
As a side note, you can avoid having to use HTML tables - example here.
这篇关于Bootstrap 缩略图中的垂直居中约束图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
