CSS – Vertically Centering

Vertically centering in CSS is not necessary simple to achieve as one would think. However saying this I have been able to achieve vertically centering without hacks and works in Mozilla Firefox, IE 5.5, IE 6, IE 7, Opera 9.10 and Safari for Windows.

Use vertical-align: middle with line-height. Make the line height is the same as the box height. If you do not see the alignment change make sure you have the height and line-height value set the same for the box in conjunction with the element you want to have the content vertically centered to.

Example

Vertically Centered Text

Source: Ten CSS Tricks You May Not Know – 8. Vertically aligning with CSS
Source: Jakpsatweb – Vertical Centering in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">