CSS에서 수직 정렬은 실제로 어떻게 작동하나요?

CSS의 수직 정렬: 뉘앙스 이해

vertical-align 속성을 사용하면 상위 요소 내에 인라인 요소를 수직으로 배치할 수 있습니다. 그러나 기본 원칙을 이해하지 않으면 동작을 예측할 수 없습니다.

인라인 요소 및 높이

세로 정렬은 인라인 요소에만 영향을 미칩니다.

및 <div> 블록 수준이며 영향을 받지 않습니다. 와 같이 고유한 줄 높이가 없는 인라인 요소의 경우 및 의 경우 line-height 속성을 사용하여 명시적으로 설정해야 합니다.

높이 및 수직 정렬

상위 요소의 높이는 정적 값을 가져야 합니다. (즉, 자동이나 백분율이 아님) 높이가 지정되지 않으면 브라우저가 내용을 기준으로 높이를 계산하므로 예상치 못한 결과가 발생할 수 있습니다.

인라인 요소 위치 지정

텍스트 정렬과 반대 , 블록 수준 포함 요소에 적용되는 수직 정렬은 위치를 지정하려는 인라인 요소에 적용되어야 합니다.

브라우저 차이점

이전 브라우저는 그렇지 않을 수 있습니다. 수직 정렬을 일관되게 지원합니다. 그러나 최신 브라우저는 인라인이 아닌 요소에 사용되는 경우에도 이를 잘 처리합니다.

예: 텍스트 가운데 맞춤

예를 들어 다음 HTML이 있다고 가정합니다.

<div>

#inner에서 텍스트를 세로로 가운데에 맞추려면 Vertical-align: middle을 #header에 적용합니다.

#header {
  display: inline-block;
  line-height: 1em;
  margin: 0;
  vertical-align: middle;
}

이 예에서 #inner는 인라인 블록입니다. 높이가 고정된 요소.

위 내용은 CSS에서 수직 정렬은 실제로 어떻게 작동하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!