CSS, vertical-align: middle with bootstrap
css, html, twitter-bootstrap
Solution
.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
Problem
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.