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

如何将图标置于圆形背景中心

2 个答案: