CSS、vertical-align：ブートストラップとの中間

Question

私は非常にシンプルなHTML/CSS問題を抱えていますが、これは頻繁に尋ねられますが、残念ながら研究をしてもうまくいきません。

私はブートストラップ（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/

ブートストラップの応答性を損なわないように、つまり幅の狭いデバイスを使用する場合は、第2のイメージを最初のイメージの下に水平にステープル留めする必要があります。

Answer 1

<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）×116である（h）のように上部

：50％。その後、画像の高さ（58px）

のマージントップ半分は、画像を縦

を中心ます更新

あなたはそのdiv要素をラップする必要があり、別の方法

<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 2

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

。

Answer 3

問題を解決しました。

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

それが正常に動作します画像の親のdiv

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

Answer 6

.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 7

にCSSを適用します。このセクションでこれを使用します。それは垂直方向と水平方向に整列しています。

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

Answer 8

ポイントは、あなたがそう多分あなたはこのような何かを行うことができ、同じ高さを持っている列が必要なことである：

あなたの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/