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

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

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

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

브라우저 코드 살펴보기

이 미스터리를 풀기 위해 우리는 Firefox 소스 코드에서 중요한 정보를 발견하게 됩니다. Firefox는 버튼 사이에 있는 "moz-button-content"라는 중간 요소를 사용합니다. 태그와 그 자식. 이 요소는 "display: block"으로 설정되어 있으며 명시적으로 정의된 높이가 없으며 기본적으로 포함된 텍스트의 줄 높이만 상속합니다.

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

미스터리의 핵심은 브라우저의 <버튼> 콘텐츠. 우리는 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"와 같은 특정 텍스트 정렬 속성을 사용해야 합니다.

환상 해소

따라서 요소가 해결되어 브라우저 정의 요소와 하드코딩된 텍스트 배치의 조화로운 상호 작용이 드러납니다. 이는 겉으로는 단순해 보이는 HTML 태그 내에 복잡함과 잠재적인 숨겨진 메커니즘이 있다는 증거로 남아 있습니다.

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

firefox html for Property default this display

성명：

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