简单问题:如何使用引导程序在col中垂直对齐col?示例这里(我想垂直对齐child1a和child1b):
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- *类的功能。