CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
alias51
alias51

Reputation: 8648

How to use vertical align in bootstrap

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;
}

Upvotes: 51

Views: 241341

Answers (8)

prinsen
prinsen

Reputation: 975

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!

Upvotes: 42

lharby
lharby

Reputation: 3265

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;
}

Upvotes: 8

Z3NF1N1TY
Z3NF1N1TY

Reputation: 11

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;
   }
}

Upvotes: 1

Avishai
Avishai

Reputation: 4760

With Bootstrap 4, you can do it much more easily: http://v4-alpha.getbootstrap.com/layout/flexbox-grid/#vertical-alignment

Upvotes: -3

southz rgw
southz rgw

Reputation: 373

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;
}

Upvotes: 6

Chris Moschini
Chris Moschini

Reputation: 37967

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 a col-*, a row, 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 or col-* 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.

Upvotes: 2

magirtopcu
magirtopcu

Reputation: 1194

.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.

Upvotes: 70

srakl
srakl

Reputation: 2619

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>

Upvotes: -1

Related Questions