How to vertically align text with icon font?
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?
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;
}
There are already a few answers here but I found flexbox to be the cleanest and least "hacky" solution:
parent-element {
display: flex;
align-items: center;
}
To support Safari < 8, Firefox < 21 and Internet Explorer < 10 (Use this polyfill to support IE8+9) you'll need vendor prefixes:
parent-element {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
vertical-align
can take a unit value so you can resort to that when needed:
{
display:inline-block;
vertical-align: 5px;
}
{
display:inline-block;
vertical-align: -5px;
}
Add this to your CSS:
.menu i.large.icon,
.menu i.large.basic.icon {
vertical-align:baseline;
}
DEMO