원형 배경에 아이콘을 센터링하는 방법

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

그렇게해야합니다.

원이 이미 정렬되어 있다고 가정합니다.