VERTICALLY CENTER TEXT INSIDE AN ELEMENT

A nifty trick for vertically centering text inside of an element is to set the line-height to be the desired height of the element, and remove any vertical padding. This will keep the height fixed and the text centered, even if the font-face, font-size, or font-weight changes.

1 Response

It should be noted that this method works great for single line items (taglines, header, etc.), but not 2 or more line text as the line height will push the 2nd+ line out of the box.
http://jsfiddle.net/Tr8wx/

Write a comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.