爲什麼我的文字和圖標突破？

Question

爲什麼我的圖標和文本不在同一直線上，雖然我有display-line

<div class="user"> 
    <ul> 
    <li>   
    <i class="fa fa-2x fa-border fa-user"></i>    
    some text    
    </li> 
</ul> 
</div> 

我需要給爲5px的保證金到我的圖標放置在它們內裏，所以使它position: absolute因爲它它現在不把它放在inline。

爲什麼我的圖標和文本與圖標頂部的margin of 5px不在同一行。

下面是小提琴。

http://codepen.io/anon/pen/CjBhm

Answer 1

不要使用定位，它不是你的情況需要。我認爲自己在對齊圖標在合適的位置，但你可以使用position: absolute;

現在對齊沒有如果您刪除定位，文本將垂直對齊的基地，原因是<i>是一個內嵌在缺省情況下，所以你需要使用vertical-align: middle;

Demo

.fa-user { 
    vertical-align: middle; 
} 

Answer 2

HTM對準基線元素大號

<div class="user"> 
    <ul> 
    <li>   
     <i class="fa fa-2x fa-border fa-user">some text</i>    
    </li> 
    </ul> 
</div> 

這不是在這裏使用<i></i>標籤沒有任何文本之間一個好主意。 我只能猜測，但很快你可能會使用此鏈接重定向到其他頁面，所以這應該發生在用戶點擊超鏈接時，而不僅僅是fa-user圖形，因爲後者會使文本變得冗餘。

爲CSS部分，

CSS

ul li { 
    display: inline-block; 
} 

.fa-user { 
    margin: 5px; 
} 

.user { 
    position: absolute; 
}