html – CSS,vertical-align：中间带引导程序

发布时间：2020-12-14 16:40:28 所属栏目：资源来源：网络整理

导读：我有一个非常简单的 HTML / CSS问题,这也是很常见的问题,但不幸的是,在进行我的研究之后我也没有让它工作. 我正在使用Bootstrap(3 RC2),我想将图像垂直对齐到一行的中间. div class="row" div class="col-xs-10 col-md-6" id="main" pimg src="http://placek

我有一个非常简单的 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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!