Vertical Aligning Within a Div
December 04, 2012
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 ListsMy 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.
The Built Environment