Vertically aligning text within a div really isn\’t too bad — its just not very intuitive. There is the css tag \’vertical-align\’, but this only applies to a small range of instances where this actually works (this tag really should apply to actually vertically aligning all possibilities).
To vertically align within a div, just give the properties to the div (you\’ll also probably want to enter a height):
vertical-align: middle; display: table-cell;
*Note: You cannot use floats with divs where you want text to vertically align. If you were to use a float along with the above code, the vertical aligning properties will be ignored.
Vertically Centered Text Within Lists
My real goal with vertical aligning was to create a nicely styled list, with the text within each cell vertically aligned. The setup just includes a list, with divs within each row that format (ie. \’tab\’) the data. This setup is similar to a table (and really I don\’t have a problem using tables for this — it was just a requirement for the project I was working on that it needed to be in a list):
<ul> <li> <div class=\"col0\">Col 0</div> <div class=\"col1\">Col 1<br />Col 1</div> <div class=\"col2\">Col 2</div> </li> </ul>
The thing to keep in mind, is that the list really doesn\’t matter — all of the vertical aligning is done through the divs. I even took the height declaration off of the li elements, and just let the height be driven by the divs.