Bootstrap how to get text to vertical align in a div container

Question

What is the best/proper way to vertically align the text in the middle of its column? The image height is statically set in the CSS.

I have tried setting an outer div to display: table and an inner div to display: table-cell with vertical-align: middle but that didn't work either.

HTML

<section id="browse" class="browse">     <div class="container">         <div class="row">             <div class="col-md-5 col-sm-5">                 <h2 class="text-left">Link up with other gamers all over the world who share the same tastes in games.</h2>             </div>             <div class="col-md-1"></div>             <div class="col-md-6 col-sm-7 animation_container">                 <img id="animation_img2" class="animation_img animation_img2" src="images/section2img2.png"/>                 <img id="animation_img1" class="animation_img animation_img1" src="images/section2img1.png"/>             </div>         </div>     </div> </section> 

CSS

.browse .container, .blind_dating .container { padding-bottom: 0; } .animation_container { position: relative; } .browse .animation_container { height: 430px; } .animation_img { position: absolute; bottom: 0; } .animation_img1 { right: 25%; } .animation_img2 { right: 25%; } 

Answer 1

HTML:

First, we will need to add a class to your text container so that we can access and style it accordingly.

<div class="col-xs-5 textContainer">      <h3 class="text-left">Link up with other gamers all over the world who share the same tastes in games.</h3> </div> 

CSS:

Next, we will apply the following styles to align it vertically, according to the size of the image div next to it.

.textContainer {      height: 345px;      line-height: 340px; }  .textContainer h3 {     vertical-align: middle;     display: inline-block; } 

All Done! Adjust the line-height and height on the styles above if you believe that it is still slightly out of align.

WORKING EXAMPLE