크롬 모바일 브라우저에서 텍스트의 수직 정렬이 잘못되었습니다.

Question

텍스트가 포함 된 고정 높이의 div가 있습니다. line-height = div의 높이. 문제 : Chrome 모바일에서 텍스트가 완전히 수직으로 가운데로 있지 않습니다. 파이어 폭스 모바일에서는 모두 괜찮습니다. 표준 Verdana 글꼴을 사용하고 있습니다.

다른 웹 사이트에서도 동일한 문제가 있음을 발견했습니다.

어떻게하면이 문제를 해결할 수 있습니까?

미리 감사드립니다.

Answer 1

특정 div 컨테이너에 다음 flex CSS 스타일 속성을 추가하면됩니다.

.cells-block { 
 
    font-family: Verdana; 
 
    width:300px; 
 
    height: 100px; 
 
    background: red; 
 
    display: flex; 
 
    align-items: center; 
 
    /* vertically */ 
 
    justify-content: center; 
 
    /* horisontally */ 
 
    text-align: center; 
 
    /* addition: for text's lines */ 
 
}

<div class="cells-block"> 
 
    This is some text<br>Randomrandom stuff 
 
</div>