Centering text vertically in a header tag 1

[TStriker]

This is a simple question but how does a CSS rookie like me vertically center text in an h1 tag?

<h1 style="height: 200px; background-color: red;">Hello World!</h1>

The text is always at the top.

-Striker

 

[vacunita]

Centering vertically is very elusive in CSS. You can try to use the line-height property and set it to the height of the containing element. But this only works for a single line of text.

There are other far more complex ways of accomplishing it, but very few work reliably across all browsers.

This page here offers lots of methods

http://www.student.oulu.fi/~laurirai/www/css/middle/

Also if you use an image you can use the vertical_align property on it, but only if its an image.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[TStriker]

Line height did it for me since it is only one single line of text. Thanks for the tip!

-Striker