Vertically aligning list items - table déjà vu

Have you ever tried to vertically align a horizontal arrangement of list items, such as a row of horizontal menu items? Did you end up pulling your hair and giving up? The fact is, block items (as defined as such in CSS) are not meant to be vertically aligned, at least not with default styling.

The solution is a return to tables ... well, kinda sort of.

Try the following...then glue your hair back on!


  <li><a href="/">Link 1</a></li>

  <li><a href="/">Link 2</a></li>

  <li><a href="/">Link 3</a></li>


And apply this CSS to it:
ul {display: inline-block}
li {vertical-align: middle; list-style: none; height: 80px; display: inline-table; max-width: 80px; 
a {vertical-align: middle; display: table-cell; height: 100%; 

Of course, the Drupal Community isn't the only place to give back. It's a complex world, and there are as many worthy causes as their are melodies, with most being served by multiple charitable organizations. Here are a few of those that strike a 7th chord with me.