如何在圆形背景中居中放置图标 [英] How to center an icon in a circular background

问题描述

我正在尝试在图标(fontawesome 4.0)周围创建圆形背景.

I am trying to create a circular background around an icon (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;
}

这样可以很好地创建背景，但是图标不在圆圈中居中.我在做什么错了?

This creates the background fine, but the icon is not centered in the circle. What am I doing wrong?

推荐答案

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

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

应该这样做.

我假设圆圈已经排序.

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

这篇关于如何在圆形背景中居中放置图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！