如何在bootstrap中使用垂直对齐

Question

简单问题:如何使用引导程序在col中垂直对齐col？这里的示例(我想垂直对齐child1a和child1b):

http://bootply.com/73666

HTML

<div class="col-lg-12">

  <div class="col-lg-6 col-md-6 col-12 child1">
    <div class="col-12 child1a">Child content 1a</div>
    <div class="col-12 child1b">Child content 1b</div>

  </div>


  <div class="col-lg-6 col-md-6 col-12 child2">
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>

  </div>

</div>

UPDATE

一些CSS:

.col-lg-12{
top:40px;
bottom:0px;
border:4px solid green;


}

  .child1a, .child1b{
  border:4px solid black;
  display:inline-block !important;
}

.child1{
  border:4px solid blue;
  height:300px;
  display:table-cell !important;
  vertical-align:middle;
}

.child2{
  border:4px solid red;
}

Answer 1

.parent {
    display: table;
    table-layout: fixed;
}

.child {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

table-layout: fixed 防止破坏col-*类的功能.

Answer 2

也许是一个古老的主题,但如果有人需要进一步帮助,请执行以下操作(例如,如果文本的高度大于文本,则将文本放在图像的中间行).

HTML:

<div class="row display-table">
    <div class="col-xs-12 col-sm-4 display-cell">
        img
    </div>
    <div class="col-xs-12 col-sm-8 display-cell">
        text
    </div>
</div>

CSS:

.display-table{
    display: table;
    table-layout: fixed;
}

.display-cell{
    display: table-cell;
    vertical-align: middle;
    float: none;
}

我错过的重要事情是"浮动:没有;" 因为它从bootstrap col属性中浮动了.

干杯!

Answer 3

对于父母: display: table;

对于孩子: display: table-cell;

然后加 vertical-align: middle;

我现在可以做一个小提琴但是回家时间,耶!

好的,这是可爱的小提琴:http://jsfiddle.net/lharby/AJAhR/

.parent {
   display:table;
}

.child {
   display:table-cell;
   vertical-align:middle;
   text-align:center;
}

Answer 4

我不得不加宽:100%; 当我使用这个例子时,显示表来修复IE和FF中的一些奇怪的行为.IE和FF在以正确的宽度显示col-md-*标签时遇到一些问题

.display-table {
        display: table;
        table-layout: fixed;
        width: 100%;
}

.display-cell {
        display: table-cell;
        vertical-align: middle;
        float: none;
}