세로 가운데 Helvetica Neue

Question

세로로 가운데에 글꼴 Helvetica Neue를 사용하는 데 문제가 있습니다. 저는 Helvetica Neue가 다른 글꼴보다 높이 앉아있는 것처럼 보이지만 다른 많은 글꼴에서 작동하는 것으로 보이는 세 가지 다른 인기있는 방법 (컨테이너, 표 셀, 패딩과 같은 선 높이)을 사용했습니다.

Font Examples

이 같은 문제가 발생하는 다른 위치 : 나는 여기에 예를 배치했다? 아니면 누군가 내가 잘못하고있는 것을 지적 할 수 있습니까?

Answer 1

글꼴의 전체 높이 대신 x 높이 (문자 x의 높이)에 따라 세로로 가운데 맞춤 글꼴을 사용하고 싶습니다. 글꼴에 따라 글꼴의 크기가 컨테이너와 얼마나 비슷한 지에 따라이 차이가 분명 해집니다. 가장 좋은 방법으로 이것을 달성하는 방법에 대한 나의 질문은 Vertical alignment based on x-height을 참조하십시오.

선호하는 방법은 빈 컨테이너를 상위 컨테이너만큼 추가하고 vertical-align: middle을 사용하여 x 높이를 기준으로 세로 가운데에 추가하려면 :after 의사 선택기를 사용하는 것입니다.

.xheight { 
    font-size: 40px; 
    text-align: center; 
} 

.xheight:after { 
    content: ''; 
    line-height: 50px; 
    vertical-align: middle; 
}