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.