요소는 어떻게 수직 텍스트 중앙 정렬을 달성합니까?

<버튼>에서 텍스트를 세로 중앙에 배치 요소

<버튼> 요소 내부의 텍스트가 자동으로 세로 중앙에 배치되는 것을 볼 수 있습니다. 이 동작은 브라우저 정의 스타일과 특정 HTML 및 CSS 측면을 포함한 요소의 조합으로 인해 발생할 수 있습니다.

HTML 구조 및 요소 계층

< 버튼> 요소, Firefox 및 기타 브라우저는 moz-button-content라는 내부 요소를 만듭니다. 이 요소는 태그와 그 자식. 결정적으로, CSS가 스타일에 직접 영향을 주지 않도록 블록을 표시하도록 설정되어 있습니다.

브라우저 강제 수직 위치 지정

Firefox에서 브라우저는 버튼의 내용. 이를 담당하는 코드는 소스 파일 "nsHTMLButtonControlFrame.cpp" 내에 있습니다. 특히, 버튼 내의 추가 공간을 계산하고 그에 따라 childPos.B() 값을 조정하여 하위 콘텐츠가 사용 가능한 공간 내 중앙에 위치하도록 합니다.

수직 센터링에서 높이의 역할

<버튼>의 높이 값 제공 moz-button-content 요소의 기본 동작을 재정의하므로 수직 중앙 정렬이 가능합니다. 지정된 높이가 없으면 moz-button-content 요소의 높이가 해당 콘텐츠만큼만 높아져 버튼 내에서 아래쪽 정렬이 이루어집니다. 높이를 지정하여 버튼 내에 추가 공간을 만들어 브라우저에서 강제로 가운데 맞춤을 적용할 수 있습니다.

예

다음 예를 고려하세요.

<button>Button content</button>

로그인 후 복사

CSS:

button {
  height: 48px;
}

로그인 후 복사

이 경우 moz-button-content 요소의 표시 블록 특성에도 불구하고 버튼의 콘텐츠는 48픽셀 높이 내에서 수직 중앙에 배치됩니다.

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