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 di

Answer 1

HTML:

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

     
Link up with other gamers all over the world who share the same tastes in games.

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