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

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

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

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

那应该这样做。

我假设已经对圆圈进行了排序。

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

Answer 2

您可以使用该border-radius物业。http://jsfiddle.net/EjYVY/对这个属性的支持在 IE9 中结束，如果您需要对旧浏览器的支持，请使用图像。在这里，我链接到该属性获得的支持http://caniuse.com/border-radius。