Vertical Centering with Bootstrap

Question

For some reason centering items in this Bootstrap example doesn't seem to be working the way that it normally would with CSS using the table/table-cell method of:

<div class="parent" style="display:table">  
  <div class="child" style="display:table-cell; vertical-align:middle>
    <h1>This is the lockup to be centered</h1>
  </div>
</div>

The Bootstrap version of something I'm working on is as follows:

<div class="container">
        <section class="hero--section col-lg-12">
          <div class="col-lg-6 col-lg-offset-3 text-center hero--content">
            <h1>Bore'em Ipsum</h1>
            <p class="lead">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis totam numquam id quidem eligendi temporibus ullam cupiditate, assumenda, qui eaque deserunt libero, vitae sed expedita dolores laborum iusto accusamus facere.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quam eveniet dolorem sapiente reiciendis dolorum sit nam debitis odio optio, dignissimos, dolor nulla rerum earum aliquid molestias! Culpa, odit, quo!</p>
            <p><a class="" href="#"><img src="//placehold.it/20x20" alt=""></a></p>
          </div>
        </section>
      </div>

With the following CSS:

.container {
  background:lavender;
  display:block;
}

.hero--section {
  display:table;
    height:535px;
}

.hero--content {
  display:table-cell;
  vertical-align: middle;
}

Example of issue here: http://codepen.io/pdnellius/pen/bEPXyG.

Anyone have an idea what I'm missing here? This is my goto method for vertical centering. I know I could probably use transform to solve this. But I'd like to know the 'why' behind why this isn't working. Is something being overridden?

score 3 · Accepted Answer · edited May 23 '17 at 12:15

Bootstrap is floating your table and table cell elements with float: left on both.

Add this to your CSS:

.hero--content {
    display: table-cell;
    vertical-align: middle;
    text-align: justify;
    float: none; /* NEW */
}

If the floats are essential to your layout, then try another centering solution. Here's a flex alternative:

.hero--section {
    display: flex;
    height: 535px;
}

.hero--content {
    margin: auto; 
 }

Revised Codepen

In a flex formatting context, floats are ignored.

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More browser compatibility details in this answer.

Hm, so I can do that... but then I lose my grid. Not sure this is optimal. — Pdnell, Feb 23 '16 at 00:42
Well that's the source of your problem. I'll post an alternative for your vertical centering. — Michael Benjamin, Feb 23 '16 at 00:43

Vertical Centering with Bootstrap

1 Answers1