CSS: Vertically Align Text in Horizontal Menu

by Tim Wong

Specification

  • Horizontal Menu
  • Each item has fixed width
  • Each item contains text with one or more rows
  • All item should be vertically centered

Solution

Note

The trick is to convert the list items into table cells so that we can apply vertical-align: middle.

.navbar ul > li {
  ...
  display: table;
}

.navbar ul > li > a {
  ...
  display: table-cell;
}

It is important to specify the cell height with absolute value. Otherwise, the cell will only take up the space of its content and vertical-align will not be effective.

.navbar ul > li > a {
  ...
  display: table-cell;
  height: 50px;    /* no effect for "100%" */
}
Reference