How to vertically align text with icon font?

Question

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:

<div class="ui menu">    <a href="t" class="item"><i class="large home basic icon"></i><span class="nav-text"> Accueil</span></a>    <a href="" class="item"><i class="large camera retro icon"></i><span class="nav-text"> Créations</span></a>    <a class="item"><span class="nav-text">Qui-suis je </span><i class="large help basic icon"></i></a>  </div>

Any suggestion to fix it?

Answer 1

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