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

Bootstrap - DIV中的垂直对齐

1 个答案: