`` 요소는 명시적인 'line-height' 없이 어떻게 수직 텍스트 정렬을 달성합니까?

<버튼>의 수수께끼 같은 세로 정렬 요소

웹 개발의 세계에서는 <버튼> 요소는 텍스트를 수직 중앙에 유지하는 겉보기에 마법 같은 능력 때문에 종종 우리를 당황하게 합니다. 이 수수께끼를 풀기 위해 HTML과 CSS의 일부를 분석해 보겠습니다.

<code class="html"><button class="button">Some Text</button>
<div class="button">Some Text</div></code>

<code class="css">.button {
  background: darkgrey;
  height: 40px;
  border: 2px solid grey;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  font-family: helvetica;
  text-align: center;
  margin-bottom: 20px;
}</code>

이 시나리오에서 명시적인 line-height 속성이 없음에도 불구하고 요소는 중앙에 유지됩니다.

브라우저의 마법 탐구

브라우저의 렌더링을 검사할 때 우리는 내부에 중첩된 숨겨진 요소를 발견합니다. <버튼> 꼬리표. Firefox에서는 moz-button-content라고 합니다. 이 요소는 브라우저의 사용자 에이전트 스타일시트에서 다음과 같이 정의됩니다.

<code class="css">*|*::-moz-button-content {
  display: block;
}</code>

이 숨겨진 요소는 텍스트를 수직으로 중앙에 배치하는 데 중요한 역할을 합니다. 블록 요소로 표시되도록 설정되어 요소가 버튼의 사용 가능한 전체 높이를 차지하게 됩니다. 이 요소 내에서는 텍스트가 자연스럽게 중앙에 정렬됩니다.

하드 코딩된 세로 위치 지정

그러나 이것이 전부는 아닙니다. 브라우저는

에 대해 추가로 하드 코딩된 동작을 사용합니다. elements:

<code class="cpp">// Center child in the block-direction in the button
nscoord extraSpace =
    buttonContentBox.BSize(wm) - contentsDesiredSize.BSize(wm);

childPos.B(wm) = std::max(0, extraSpace / 2);</code>

이 코드는 브라우저가 의도적으로 moz-button-content 요소의 텍스트 양쪽에 여분의 공간을 추가하여 효과적으로 세로 중앙에 배치하는 것을 보여줍니다.

퍼팅 모두 함께

요약하면

요소는 두 가지 요소에서 발생합니다:

• 텍스트를 블록으로 표시하고 자연스럽게 중앙에 정렬하는 moz-button-content 요소의 존재.
• 하드-버튼 콘텐츠 요소의 존재 버튼 내 moz-button-content 요소를 중앙에 배치하는 코딩된 브라우저 동작.

위 내용은 `` 요소는 명시적인 'line-height' 없이 어떻게 수직 텍스트 정렬을 달성합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!