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>

vertical-align仅用于元素内部

在这种情况下，您的图像为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" 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/

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 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;}

CSS，vertical-align：中间带引导程序

8 个答案: