CSS: Vertically Align Text in Horizontal Menu

Specification

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

Solution

• http://jsfiddle.net/6L1kgto3/

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

• Vertical Align A Horizontal Menu in CSS