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