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

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

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

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

브라우저 코드 살펴보기

이 미스터리를 풀기 위해 우리는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn

이전 기사：진행률 표시줄처럼 보이도록 HTML5 범위 입력 유형을 사용자 정의하려면 어떻게 해야 합니까? 다음 기사：CSS를 사용하여 iOS 기기에서 Iframe 크기 문제를 해결하는 방법은 무엇입니까?

본 웹사이트의 성명

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

저자별 최신 기사

최신 이슈

function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...

에서 2024-04-29 11:01:01

0

2

1984

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

0

10

2146

자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.

에서 2024-04-19 15:37:47

0

1

1811

상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');

에서 2024-04-18 23:52:34

0

1

1706

CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어

에서 2024-04-16 10:10:18

0

0

1719

관련 주제

더>

• 사용자 계정 컨트롤 취소 방법
• 오늘 U코인 가격
• 정의 사용 방법
• js는 무슨 뜻인가요?
• Java 테스트 도구란 무엇입니까?
• 컴퓨터의 C 드라이브가 꽉 찼을 때 정리하는 방법
• vlookup 기능을 사용하는 방법
• Douyin에서 작은 소방관을 키우는 방법