CSS, vertical-align: middle with bootstrap

Question

I have a quite simple HTML/CSS problem which is also quite frequecently asked, but unfortunately I did not get it to work also after doing my research.

I am using Bootstrap (3 RC2) and I'd like to vertical align an image into the middle of a row.

<div class="row">
    <div class="col-xs-10 col-md-6" id="main">
        <p><img src="http://placekitten.com/500/700" alt="" width="500" height="700" /></p>
    </div>
    <div class="col-xs-1 col-md-1" style="display: inline-block; vertical-align: middle;">
        <img src="http://placekitten.com/100/116"  width="100" height="116" />
    </div>
</div>

The second, smaller image should be vertically centered in the middle of the div.row. However, it does not seem to work. You can see the problem using this fiddle: http://jsfiddle.net/veQKY/2/

It is a requirement to not break the responsiveness of Bootstrap, i.e. when using a device with small width the second image should be stapled horizontally beneath the first image.

Answer 1

.centerFlex {
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
http://jsfiddle.net/veQKY/2/ check this link worked