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

问题描述

使用

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?

<div class="thumbnail_wrapper"><img src="http://i.minus.com/iucsUZfSM9v45.gif"/>

解决方案

将 .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.

<img src="http://i.minus.com/iucsUZfSM9v45.gif"/>

<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 缩略图中的垂直居中约束图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！