I had a little trouble today getting text to vertically align in the center of a div.

There is a “vertical-align” element that I’ve used before but it doesn’t appear to work on IE6 for a div.

I played around with setting the divs line-height to the same height as my div and although that did work, if my text was longer than one line it broke everything.

What eventually did work was setting the div’s height and div’s min-height to the same amount. I then put the text inside a span and used position:relative, top:50%, margin-top:-0.5em.

Example:

div.middlealign
{
min-height:200px !important;
height:200px;
}
span.middlealign
{
position:relative;
top:50%;
margin-top:-0.5em;
}


I found the tip along with some other methods here: http://www.student.oulu.fi/~laurirai/www/css/middle/