如何垂直对齐图标字体的文本？ [英] How to vertically align text with icon font?

问题描述

我有一个非常基本的混合纯文本和图标字体的HTML：

 < div class =ui menu > 
< a href =tclass =item>< i class =大型家庭基本图标>< / i>< span class =nav-text> ACCUEIL< /跨度>< / A> 
< a href =class =item>< i class =大型相机复古图标>< / i>< span class =nav-text>创作< /跨度>< / A> 
   
 
 
  .nav-text {
 vertical-align：middle; 
} 
  
 
I've a very basic HTML which mix plain text and icon fonts:
<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>
The problem is that icons are not exactly rendered at the same height than the text:



Any suggestion to fix it?
解决方案
You could add vertical-align:middle to the span elements:

UPDATED EXAMPLE HERE
.nav-text {
    vertical-align:middle;
}


                        
这篇关于如何垂直对齐图标字体的文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！