html - CSS，垂直对齐：带引导程序的中间

Question

我有一个非常简单的 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 的响应能力，即当使用宽度较小的设备时，第二张图片应水平装订在第一张图片下方。

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

Answer 2

它会正常工作。将其用于该部分。它垂直和水平对齐。

display:flex;
justify-contents:center;
align-items:center;

Answer 3

关键是您需要列具有相同的高度，所以也许您可以执行以下操作：

你的 html

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

你的 CSS

/* columns of same height styles */
.container-xs-height {
    display:table;
    padding-left:0px;
    padding-right:0px;
}
.row-xs-height {
    display: table;
}


[class*="col-"] {
    float: left;
    display: block;
    vertical-align: middle;
    text-align: center;
}


img{
    max-width: 100%;
    height: auto;
}

@media (min-width: 992px) {


    [class*="col-"] {
        float: none;
        display: table-cell;
        vertical-align: middle;
    }
}
@media (min-width: 1200px) {
    .container-lg-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-lg-height {
        display:table-row;
    }
    .col-lg-height {
        display:table-cell;
        float:none;
    }
}

大部分内容来自这里： http: //www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

在这里你可以看到一个小提琴

http://jsfiddle.net/dmdcode/P83kW/

Answer 4

<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; top:50%;margin-top:-58px;position:absolute;">
        <img src="http://placekitten.com/100/116"  width="100" height="116" />
    </div>
</div>

垂直对齐仅在元素内部使用

在这种情况下，您的图像是 100(w) x 116(h)

所以最高：50%；然后是图像高度的上半部分（58px）

然后图像将垂直居中

更新

另一种方法

<div style="background:url(http://placekitten.com/500/700) center no-repeat;width:500px;height:700px;position:relative;">
      <img src="http://placekitten.com/100/116"  width="100" height="116" style="position:absolute;top:50%;margin-top:-58px;right:0;"/>         
</div>

Answer 5

<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;">
        <div class="" style="display: table; height: 700px; #position: relative; overflow: hidden;">
          <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
            <div class="" style=" #position: relative; #top: -50%">
              <img src="http://placekitten.com/100/116"  width="100" height="116" />
            </div>
          </div>
        </div>
    </div>
</div>

你需要包装那个div。

Answer 6

问题解决了。

CSS：

.row {
    display: table!important;
}
.test {
    display: table-cell!important;
    vertical-align:middle;  
}

HTML：

<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 test">
        <img src="http://placekitten.com/100/116"  width="100" height="116" />
    </div>
</div>

更新小提琴：http: //jsfiddle.net/afKDJ/show

Answer 7

<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 middle-img">
    <img src="http://placekitten.com/100/116"  width="100" height="116" />
</div>

在图像父 div 上应用 css

.middle-img {display: table-cell;float: none;height: 300px /*any value*/;vertical-align: middle;}

Answer 8

可能不是一个非常优雅的解决方案，但这似乎有效：

<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; margin-top:-58px; padding-top:50%;">
        <img src="http://placekitten.com/100/116"  width="100" height="116" valign="middle" />
    </div>
</div>

http://jsfiddle.net/4LMKe/