Vertical Aligning Within a Div

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.