圖標字體不是以文字居中居中

Question

我在nav列表中使用圖標字體，我希望文字位於兩個圖標之間。問題是圖標和文字不匹配。圖標區域明顯高於文本，因此當它們都在基線上時，圖標會變得更高。通過將文本放入span可以使用任何解決方案嗎？我試圖調整各項參數，我知道：

HTML：

<nav class="nav"> 
    <ul> 
     <li><span data-icon="&#xE603;"></span><h2>HOME</h2></li> 
     <li><p>ICON FONT FTW</p></li> 
     <li><span data-icon="&#xE603;"></span><h2>ABOUT</h2></li> 
     <li><span data-icon="&#xE603;"></span><h2>CONTACT</h2></li> 
    </ul> 
</nav> 

CSS：

nav { 
    font-size: 1.2em; 
    background: gray; 
    text-align: center; 
} 
nav li:first-child { 
    display: inline-block; 
} 

nav li { 
    display: inline-block; 
} 

Answer 1

我會說，我們首先需要重設風格，因爲我們涉及此標籤（h2，p），其中有超過瀏覽器不同的行爲。

爲了克服這個，我實施了舊技術。設置邊距和填充以重置樣式。

CSS：

nav { 
    font-size: 1.2em; 
    background: gray; 
    text-align: center; 
    padding:0;margin:0; 
} 
nav li:first-child { 
    display: inline-block; 
} 
nav li { 
    position:relative; 
    display: inline-block; 
    vertical-align:middle; 
} 
nav h2,nav div{ 
    position:relative; 
    display:inline-block;height:100%;width:100%; 
    padding:0; 
    margin:20px auto; 
} 
nav h2{ 
} 
nav div{ 
} 

HTML：改變了它一下，看看在小提琴的圖標。

<nav class="nav"> 
    <ul> 
     <li><span data-icon="&#xE603;"></span><h2>&#xE603;</h2></li> 
     <li><div>ICON FONT FTW</div></li> 
     <li><span data-icon="&#xE603;"></span><h2>&#xE603;</h2></li> 
     <li><span data-icon="&#xE603;"></span><h2>&#xE603;</h2></li> 
    </ul> 
</nav> 

請檢查我的fiddle，這給了我很好的結果。

Answer 2

您可以使用line-height。例如： HTML：

<nav class="nav"> 
    <ul> 
     <li><span data-icon="&#xE603;"></span><h2>HOME</h2></li> 
     <li><p class="lineHeight">ICON FONT FTW</p></li> 
     <li><span data-icon="&#xE603;"></span><h2>ABOUT</h2></li> 
     <li><span data-icon="&#xE603;"></span><h2>CONTACT</h2></li> 
    </ul> 
</nav> 

CSS：

nav { 
    font-size: 1.2em; 
    background: gray; 
    text-align: center; 
} 
nav li:first-child { 
    display: inline-block; 
} 

nav li { 
    display: inline-block; 
} 

.lineHeight{ 
line-height: 1.3em; 
}