Menu
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?
867
Use line-height for vertical centering with a fixed height To vertically center a single line of text or an icon within its container, we can use the line-height property. This property controls the height of a line in a run of text and adds an equal amount of space above and below the line-box of inline elements.
If you want to make a text appear vertically aligned next to a Font Awesome icon, you can use the CSS vertical-align property set to “middle” and also, specify the line-height property. Change the size of the icon with the font-size property.
1 Select the text you want to center between the top and bottom margins. 2 On the Page Layout tab, click the Page Setup Dialog Box Launcher. 3 Select the Layout tab. 4 In the Vertical alignment box, click Center 5 In the Apply to box, click Selected text, and then click OK.
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; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
