Vertically center constrained image in Bootstrap thumbnail

Question

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

This gets me most of the way there, using this 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/

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

The thumbnail div elements 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.

I've tried adding vertical-align: middle to the thumbnail div elements, but to no avail.

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

Answer 1

Approach 1 - (example):

Wrap the img elements:

<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 .thumbnail element to table. Use border-collapse: separate to fix padding/spacing issues. Change the display of the wrapper to table-cell and then add vertical-align: middle. Finally, give the img elements a width of 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):

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>

Basically, just change the display of the .thumbnail element to flex and 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).

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.

Answer 2

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:

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