CSS – Vertical-Align Middle / Centered Text in a Div

Vertical Aligning text is actually quite easy. Set your container element to display:table, and your child element (doesn’t have to be a p, I used an a link element. I’m sure span and other things would work as well) to display:table-cell; and vertical-align:middle.

Voila!

The HTML:

<div id="container"><p>Test</p></div>

The CSS:

#container{
display: table;
}

#container p{ //could be #container a, #container span, etc..
display: table-cell; 
vertical-align: middle;
}

Demo: blog.nerdstogeeks.com/2011/03/vertical-align-text-in-div-elements.html

Leave a Reply