How to vertically align text with icon font?

Fractaliste picture Fractaliste · Mar 20, 2014 · Viewed 128.7k times · Source

I have a very basic HTML which mix plain text and icon fonts. The problem is that icons are not exactly rendered at the same height than the text:

enter image description here

Any suggestion to fix it?

Answer

Josh Crozier picture Josh Crozier · Mar 20, 2014

In this scenario, since you are working with inline-level elements, you could add vertical-align: middle to the span elements for vertical centering:

.nav-text {
  vertical-align: middle;
}

Alternatively, you could set the display of the parent element to flex and set align-items to center for vertical centering:

.menu {
  display: flex;
  align-items: center;
}