如何在表格单元格中对齐两个div

时间:2013-08-12 14:22:11

标签: css3 twitter-bootstrap vertical-alignment twitter-bootstrap-3

我正在尝试使用bootstrap 3 RC1垂直对齐表格单元格中的两个div。我已经应用了vertical-align类但我缺少什么? Bootply在这里:http://bootply.com/73625

HTML

<div class="content">

  <div class="col-lg-6 col-md-6 col-12 child1">Child content</div>
  <div class="col-lg-6 col-md-6 col-12 child2">Child content</div>

</div>

CSS

.content{
position:absolute;
top:40px;
bottom:0px;
width:100%;
  border:4px solid green;
  display:table-cell;
  vertical-align:middle;

}

.child1{
  border:4px solid blue;
}

.child2{
  border:4px solid red;
}

1 个答案:

答案 0 :(得分:0)

试试这个:

.content{
  position:absolute;
  top:40px;
  bottom:0px;
  width:100%;
  border:4px solid green;
  display:table-cell;
  vertical-align:middle;

}

.child1{
  border:4px solid blue;
  display: block;
  width: 100%;
}

.child2{
  border:4px solid red;
  display: block;
  width: 100%;
}