How to use vertical align in bootstrap
CssTwitter BootstrapTwitter Bootstrap-3Css Problem Overview
Simple problem: How do I vertically align a col within a col using bootstrap? Example here (I want to vertically align child1a and 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>
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;
}
Css Solutions
Solution 1 - Css
.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.
Solution 2 - Css
Maybe an old topic but if someone needs further help with this do the following for example (this puts the text in middle line of image if it has larger height then the text).
HTML:
<div class="row display-table">
<div class="col-xs-12 col-sm-4 display-cell">
img
</div>
<div class="col-xs-12 col-sm-8 display-cell">
text
</div>
</div>
CSS:
.display-table{
display: table;
table-layout: fixed;
}
.display-cell{
display: table-cell;
vertical-align: middle;
float: none;
}
The important thing that I missed out on was "float: none;" since it got float left from bootstrap col attributes.
Cheers!
Solution 3 - Css
For the parent: display: table;
For the child: display: table-cell;
Then add vertical-align: middle;
I can make a fiddle but home time now, yay!
OK here is the lovely fiddle: http://jsfiddle.net/lharby/AJAhR/
.parent {
display:table;
}
.child {
display:table-cell;
vertical-align:middle;
text-align:center;
}
Solution 4 - Css
I had to add width: 100%; to display table to fix some strange bahavior in IE and FF, when i used this example. IE and FF had some problems displaying the col-md-* tags at the right width
.display-table {
display: table;
table-layout: fixed;
width: 100%;
}
.display-cell {
display: table-cell;
vertical-align: middle;
float: none;
}
Solution 5 - Css
http://jsfiddle.net/b9chris/zN39r/
HTML:
<div class="item row">
<div class="col-xs-12 col-sm-6"><h4>This is some text.</h4></div>
<div class="col-xs-12 col-sm-6"><h4>This is some more.</h4></div>
</div>
CSS:
div.item div h4 {
height: 60px;
vertical-align: middle;
display: table-cell;
}
Important notes:
- The
vertical-align: middle; display: table-cell;
must be applied to a tag that has no Bootstrap classes applied; it cannot be acol-*
, arow
, etc. - This can't be done without this extra, possibly pointless tag in your HTML, unfortunately.
- The backgrounds are unnecessary - they're just there for demo purposes. So, you don't need to apply any special rules to the
row
orcol-*
tags. - It is important to notice the inner tag does not stretch to 100% of the width of its parent; in our scenario this didn't matter but it may to you. If it does, you end up with something closer to some of the other answers here:
http://jsfiddle.net/b9chris/zN39r/1/
CSS:
div.item div {
background: #fdd;
table-layout: fixed;
display: table;
}
div.item div h4 {
height: 60px;
vertical-align: middle;
display: table-cell;
background: #eee;
}
Notice the added table-layout and display properties on the col-*
tags. This must be applied to the tag(s) that have col-*
applied; it won't help on other tags.
Solution 6 - Css
Prinsen's answer is the best choice. But, to fix the issue where the columns don't collapse his code needs to be surrounded by a media check statement. This way these styles are only applied when the larger columns are active. Here is the updated complete answer.
HTML:
<div class="row display-table">
<div class="col-xs-12 col-sm-4 display-cell">
img
</div>
<div class="col-xs-12 col-sm-8 display-cell">
text
</div>
</div>
CSS:
@media (min-width: 768px){
.display-table{
display: table;
table-layout: fixed;
}
.display-cell{
display: table-cell;
vertical-align: middle;
float: none;
}
}
Solution 7 - Css
You mean you want 1b and 1b to be side by side?
<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>
Solution 8 - Css
With Bootstrap 4, you can do it much more easily: http://v4-alpha.getbootstrap.com/layout/flexbox-grid/#vertical-alignment