css - 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%);  
}

这个在 Bootstrap 列上根本不起作用。

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