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

Vertically center constrained image in Bootstrap thumbnail

提问by casperOne

Using Twitter Bootstrap, I'm trying to create a horizontally scrolling series of thumbnailswhich allows for a scrollbar within the row that the thumbnails are displayed in, like so:

使用Twitter Bootstrap，我试图创建一个水平滚动的缩略图系列，它允许在显示缩略图的行内有一个滚动条，如下所示：

This gets me most of the way there, using this HTML:

这让我在那里的大部分方式，使用这个 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/

JSFiddle：http: //jsfiddle.net/54fgv/2/

The overflowCSS property works great, giving me the scrollbar for the container div.

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

The thumbnail divelements are going to be a fixed size, which is more than likely going to be smaller than the image. In this case, the image is constrained to fit accordingly. As you can see though, when the image is wider than the thumbnail, the width is set to the thumbnail and the height is scaled accordingly. This is the behavior that I want, but I'd like to have the image vertically centered in the thumbnail.

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

I've tried adding vertical-align: middleto the thumbnail divelements, but to no avail.

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

How can I get the image to be centered vertically within the thumbnail?

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

回答by Josh Crozier

Approach 1- (example):

方法 1- （示例）：

Wrap the imgelements:

包裹img元素：

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

Change the display of the .thumbnailelement to table. Use border-collapse: separateto fix padding/spacing issues. Change the display of the wrapper to table-celland then add vertical-align: middle. Finally, give the imgelements a width of 100%.

将.thumbnail元素的显示更改为table。使用border-collapse: separate于固定填充/间距问题。将包装器的显示更改为table-cell，然后添加vertical-align: middle. 最后，给img元素一个宽度100%。

Example Here

示例在这里

.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%;
}

---

---

Approach 2- (example):

方法 2- （示例）：

The flexbox approach doesn't require the wrapper element, however it has slightly less supportthan the table/table-cellapproach.

flexbox 方法不需要包装元素，但是它比/方法的支持略少。tabletable-cell

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

Basically, just change the displayof the .thumbnailelement to flexand then add align-items: center. All the other vendor prefixes are added for cross browser support. Read more about flexbox layouts and properties here- (mdn).

基本上，只需display将.thumbnail元素的更改为flex，然后添加align-items: center。添加所有其他供应商前缀以支持跨浏览器。在此处阅读有关 flexbox 布局和属性的更多信息- (mdn)。

Example Here

示例在这里

.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;
}

---

---

As a side note, you can avoid having to use HTML tables - example here.

作为旁注，您可以避免使用 HTML 表格 -此处的示例。

回答by bearfriend

HTML:

HTML：

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

CSS:

CSS：

.v_align_all { white-space: nowrap }

.v_align_all > * {
    vertical-align: middle;
    display: inline-block !important;
}

.v_align_fix {
    height: 100%;
    vertical-align: middle;
    display: inline-block;
    width: 0px;
    white-space: nowrap;
}