css3 – 如何在引导中使用垂直对齐

前端之家收集整理的这篇文章主要介绍了css3 – 如何在引导中使用垂直对齐前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
简单问题:如何使用引导程序在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;
}

解决方法

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

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

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

猜你在找的CSS相关文章