如何在bootstrap中使用垂直对齐

简单的问题：我如何使用bootstrap将一个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>

更新

一些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;
}
edsioufi
已编辑的问题 12日 八月 2013 в 5:32
编程
css3 twitter-bootstrap-3 twitter-bootstrap
12日 八月 2013 в 4:31
10 种观点
解决办法
.parent {
    display: table;
    table-layout: fixed;
}

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

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

Chris Moschini
编辑本段答案28日 七月 2014 в 5:22
评论(4)

对于父体：显示：表;。

对子代来说。display: table-cell;对于子代：display: table-cell;。

然后添加vertical-align: middle;。

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

好了，这就是可爱的小提琴：http://jsfiddle.net/lharby/AJAhR/

.parent {
   display:table;
}

.child {
   display:table-cell;
   vertical-align:middle;
   text-align:center;
}
moritzg
编辑本段答案9日 五月 2017 в 12:11
评论(1)

你是说你想让1b和1b并列在一起？ 

 <div class="col-lg-6 col-md-6 col-12 child1">
      <div class="col-6 child1a">Child content 1a</div>
      <div class="col-6 child1b">Child content 1b</div>
 </div>
daniel__
编辑本段答案12日 八月 2013 в 5:02
评论(3)