How to center an icon in a circular background

问题

I am trying to create a circular background around an icon (fontawesome 4.0).

Consider the following code:

<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?

回答1:

You could use the border-radius property. http://jsfiddle.net/EjYVY/ the support for this property ends in IE9, if you need support for older browsers use an image. Here I linked to the support the property gets http://caniuse.com/border-radius.

回答2:

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

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

That should do it.

I assuming that the have the circle sorted already.

If not add border-radius:50%;

来源：https://stackoverflow.com/questions/19601280/how-to-center-an-icon-in-a-circular-background

标签

css