Bootstrap - DIV中的垂直對齊

Question

我試圖垂直居中Bootstrap列。

我嘗試的當前狀態：

HTML

<div class="out"> 
<div class="inn"> 
    <div class="col-xs-12 col-sm-6 lft v-align" > 
     LEFT 
    </div> 
    <div class="col-xs-12 col-sm-6 rght"> 
     <div style="height: 200px"> 
      RIGHT 
     <div>  
    </div> 
</div> 
</div> 

CSS

.out{ 
    display:table; 
    width:100%; 
} 

.inn{ 
    display:table-cell; 
    vertical-align:middle; 
    background-color: blue; 
} 
.lft{ 
    background-color: green; 
} 
.rght{ 
    background-color: orange; 
} 
.v-align { 
    float: left; 
    display: inline-block; 
    vertical-align: middle; 
} 

我曾嘗試之前：

.col-sm-middle { 
    vertical-align: middle; 
} 
    .row-sm-height { 
    display: table; 
    table-layout: fixed; 
    height: 100%; 
    width: 100%; 
} 

但是這一塊殺死了列的響應行爲。

我也做了嘗試：

.vert{ 
    position: relative; 
    text-align: center; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

這一個根本不能上舉列的工作。

JSFFIDLE

任何幫助將非常感激。

Answer 1

Bootstrap的列在您嘗試執行的操作中沒有任何用處。您只需使用table-cell招不使用網格系統：

HTML

<div class="out"> 
    <div class="col"> 
     <div class="lft"> 
      LEFT 
     </div> 
    </div> 
    <div class="col"> 
     <div style="height: 200px" class="rght"> 
      RIGHT 
     </div> 
    </div> 
</div> 

CSS

.out { 
    display:table; 
    width:100%; 
    background-color: blue; 
} 
.col { 
    display: table-cell; 
    vertical-align: middle; 
    width: 50%; 
} 
.lft { 
    background-color: green; 
} 
.rght { 
    background-color: orange; 
} 

JSFiddle

如果你要想讓它成爲移動響應你可以有這些表格樣式Ÿ申請超過一定寬度：

@media (min-width: 992px){ 
    .out { 
     display:table; 
     width:100%; 
    } 
    .col { 
     display: table-cell; 
     vertical-align: middle; 
     width: 50%; 
    } 
} 

JSFiddle