큰 글꼴 크기의이 텍스트가 줄 높이를 고려하지 않는 이유는 무엇입니까?

Question

div 안에 100px만큼 텍스트를 세로 정렬하려고합니다. 문제는 글꼴 크기를 더 크게 설정하면 선 높이를 고려하지 않는다는 것입니다.

다른 글꼴 크기 (12px)로 다른 테스트를하는 것이 효과적입니다.

어떻게 수정해야하며 왜 이런 일이 발생합니까?

더 큰 글꼴 크기 : http://jsfiddle.net/2sLNy/1/

작은 글꼴 크기 : http://jsfiddle.net/2sLNy/2/

더 큰 글꼴 크기 코드 :

div{ 
    position: relative; 
    width: 100px; 
    height: 100px; 
    background-color: #DDD; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    text-align: center; 
    line-height: 100px; 
} 

div:hover:before{ 
    opacity: 1; 
} 

div:before{ 
    opacity: 0; 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    display: block; 
    text-align: center; 
    font-size: 12px; 
    color: #FFF; 
    content: " + "; 
    background-color: rgba(0, 0, 0, 0.5); 
    z-index: 1; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    line-height: 100px; 
} 

감사합니다!

Answer 1

모든 것이 실제로 예상대로 작동합니다. 참조 용으로 살펴보십시오. http://jsfiddle.net/2sLNy/9/

+은 자연스럽게 다른 모든 문자보다 상대적으로 낮은 위치에 있습니다. 오프셋이 있습니다. 당신은 jsfiddle에서 그것을보아야합니다. 크기가 작을 때 모양이 좋아 보이는 이유는 글자가 작아서 텍스트가 더 클 때만큼 오프셋을 볼 수 없기 때문입니다.

하면 다음과 같은 내용 속성을 font awesome 같은 아이콘 글꼴 중 하나를 사용하여 사용해보십시오 :

content: "\f067"; 

편집 : 적합하지만,이는 fontawesome와 모습입니다하지 : http://jsfiddle.net/2sLNy/13/