如何在圆形背景中居中图标

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%;