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!

<ul>

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

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

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

</ul>

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%;