我有一个非常简单的
HTML / CSS问题,这也是很常见的问题,但不幸的是,在进行我的研究之后我也没有让它工作.
我正在使用Bootstrap(3 RC2),我想将图像垂直对齐到一行的中间.
<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>
第二个较小的图像应垂直居中在div.row的中间.但是,它似乎不起作用.你可以用这个小提琴看到问题：http://jsfiddle.net/veQKY/2/
要求不破坏Bootstrap的响应性,即当使用宽度较小的设备时,第二个图像应在第一个图像下方水平装订.
解决方法
.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
