解決：我如何將我的字體超棒的圖標與我的文本對齊？

我一直在試圖以我的Fontastic.me圖標爲中心。解決：我如何將我的字體超棒的圖標與我的文本對齊？

這裏是我的代碼：

HTML：

<html> 
<div id="info"> 
    <ul> 
     <li id="chat"><span class="icon-comment-discussion"></span><p>We offer the best & simplest chat system on the web.</p></li> 
</ul> 
</div> 
</html>

和我的CSS：

#chat { 
line-height: 72px; 
vertical-align: middle; 
}

它不排隊的一切，當我改變的在垂直沒什麼變化對齊選項。我想可能是因爲我的文本是在段落標籤中;但我想先問在這裏。

解決：我添加了vertical-align：middle;到：

#chat span { 

}

它工作完美。

來源

2014-07-12 zyphal

作爲標準的段落會應用邊距，您可以嘗試刪除邊距以查看是否有幫助，或將圖標放在段落內。

p{ margin:0; }

來源

2014-07-12 23:39:26

對不起，我忘了說我有一個reset.css應用。我嘗試了你的想法，但不幸的是它沒有奏效。我也嘗試把圖標放在段落內，但也沒有工作：/ – zyphal

字體真棒圖標都是單聲道的間距/大小我相信，所以你應該能夠給一個固定的像素值的垂直對齊圖標本身。試試這個... .icon-comment-discussion {vertical-align：-10px; } –

解決：我如何將我的字體超棒的圖標與我的文本對齊？

回答

相關問題