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/

작은 폭의 장치를 사용할 때 두 번째 이미지가 첫 번째 이미지 아래로 수평으로 스테이플 링되어야합니다. 즉, 부트 스트랩의 응답을 끊지 않아야합니다.

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

10 는

<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

I 프레임이 중간에 설정 폭 증가 할 때

여기 당신은 바이올린

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