`` 요소의 텍스트가 자동으로 수직 중앙에 배치되는 이유는 무엇입니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

`` 요소의 텍스트가 자동으로 수직 중앙에 배치되는 이유는 무엇입니까?

Barbara Streisand

Oct 25, 2024 pm 01:59 PM

Why Does Text in `` Elements Automatically Center Vertically?

의 세로 중앙 텍스트 뒤에 숨겨진 수수께끼 요소

요소는 독특한 동작을 나타냅니다. 텍스트 내용은 쉽게 요소 내에서 수직으로 중앙에 배치됩니다. 사소한 작업처럼 보이는 것이

텍스트 정렬 속성이 동일한 효과를 내지 않는 것 같습니다.

브라우저 코드 살펴보기

이 미스터리를 풀기 위해 우리는 Firefox 소스 코드에서 중요한 정보를 발견하게 됩니다. Firefox는

세로 텍스트 정렬 뒤에 숨은 마법

미스터리의 핵심은 브라우저의 콘텐츠. 우리는 Firefox 소스 코드에서 버튼 프레임 내의 지정된 추가 공간 내에 하위 요소("moz-button-content")를 명시적으로 배치하는 스니펫을 발견했습니다.

시각화된 미스터리

시각화 요소의 레이아웃을 통해 요소 간의 상호 작용을 더 명확하게 이해할 수 있습니다.

+--+-----------------------+^
|  + button extra space     | |
|  |                       | |
+--+-----------------------+ |
|| ::moz-button-content || | button height
||   display: block;    || |
+--+-----------------------+ |
|  |                       | |
|  + button extra space     | |
+--+-----------------------+v

요소에는 고정된 높이가 제공되며, "moz-button-content" 요소는 "display: block" 속성으로 인해 내용의 높이(일반적으로 텍스트의 줄 높이)를 가정합니다. 이로 인해 콘텐츠 위와 아래에 추가 공간이 의도적으로 배포되어 수직 중심 동작이 관찰됩니다.

요소 간 평행 그리기

반면 < ;div> 요소에는 내장된 수직 텍스트 센터링이 부족합니다. 유사한 정렬 동작을 달성하려면 콘텐츠의 "line-height" 속성을 전환하거나 "align-items: center"와 함께 "flexbox"와 같은 특정 텍스트 정렬 속성을 사용해야 합니다.

환상 해소

위 내용은 `` 요소의 텍스트가 자동으로 수직 중앙에 배치되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사