How to use vertical align in bootstrap
css, twitter-bootstrap, twitter-bootstrap-3
Solution
.parent {
display: table;
table-layout: fixed;
}
.child {
display:table-cell;
vertical-align:middle;
text-align:center;
}
`table-layout: fixed` prevents breaking the functionality of the col-* classes.
Problem
Simple problem: How do I vertically align a col within a col using bootstrap? Example here (I want to vertically align child1a and 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 Some 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; } ```