CSS，vertical-align：中間帶引導程序

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