높이 및 세로 정렬

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

인라인 요소 위치 지정

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

브라우저 차이점

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

예: 텍스트 가운데 맞춤

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

#inner에서 텍스트를 세로로 가운데에 맞추려면 Vertical-align: middle을 #header:
#header {
  display: inline-block;
  line-height: 1em;
  margin: 0;
  vertical-align: middle;
}
이 예에서 #inner는 높이가 고정된 인라인 블록 요소입니다.