Vertically aligning list items - table déjà vu

17 June, 2024

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



Login or Register to Comment!