如何在圓形背景中居中圖標

Question

我正在嘗試圍繞圖標（fontawesome 4.0）創建圓形背景。

考慮下面的代碼：

<span class="participant img-circle"><i class="fa fa-user" data-original-title="" title=""></i></span> 

.participant{ 
    background: @gray-light; 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
} 

.participant i { 
    font-size: 50px; 
} 

這將創建背景很好，但是圖標沒有在圓圈中央。我究竟做錯了什麼？

Answer 1

您可以使用border-radius屬性。 http://jsfiddle.net/EjYVY/對此屬性的支持以IE9結束，如果您需要對舊版瀏覽器的支持，請使用圖片。在這裏，我鏈接到財產得到的支持http://caniuse.com/border-radius。

Answer 2

.participant{ 
    background: @gray-light; 
    display: inline-block; 
    width: 100px; 
    height: 100px; 

/* Add this */ 
    line-height:100px; /* as height */ 
    text=align:center; 
} 

這應該做到這一點。

我假設已經將圓圈排序了。

如果不添加border-radius:50%;