Vertical Centering with Bootstrap - html

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?

Answer 1

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.