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.  




Related Posts


Fixed Position Div Isn't Staying Fixed When Scrolling on Android

My nice fixed position toolbar wasn't sticking as it should as I scrolled through on my mobile browser window...
Read Post

Simple Sticky Element

The user scrolls down the page and once the scrolling reaches the top of an element of my choosing, that element sticks to the top of the window, so it's always visible from that point on...
Read Post

Chrome displays a different height than what Chrome says the height should be.

I was changing the height of an element, but no matter where I specified the height, it wasn't displaying what I was putting in
Read Post

A Nicer Select Dropdown

Better select boxes are all over the internet, but I actually couldn't find one that I liked, and that worked for what I needed...
Read Post