컨테이너 내에서 인라인 블록 요소를 수직 정렬하지 않는 이유는 무엇입니까?

인라인 블록 요소의 수직 정렬 이해

문서에서는 수직 정렬이 인라인 블록 요소에 작동한다고 제안하지만 다음과 같은 경우 혼란스러울 수 있습니다. 예상대로 정렬되지 않습니다. 명확히 하기 위해 개념을 더 자세히 살펴보겠습니다.

Vertical-Align의 범위

상위 요소의 콘텐츠 영역 내에서 텍스트 정렬을 조정하는 text-align과 달리, 수직 정렬은 align은 요소의 라인 상자 내에서 작동합니다. 라인 상자는 단일 라인의 인라인 레벨 요소에 의해 생성된 상자를 둘러싸는 직사각형 영역입니다.

예:

다음 코드를 고려하세요.

#wrapper {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}
#content {
  border: 1px solid black;
  display: inline-block;
  vertical-align: middle;
}

<div>

문제:

이 예에서 Vertical-align: middle을 설정하면 #wrapper div 내의 #content 요소가 수직으로 가운데에 배치되지 않습니다.

설명:

Vertical-align은 컨테이너 블록을 기준으로 인라인 블록 요소를 정렬하지 않고 자체 라인 상자 내에 정렬합니다. #content 요소에는 기본 수직 정렬: 기준선에 따라 이미 수직 중앙에 정렬된 텍스트만 포함되어 있으므로 최종 정렬에는 영향을 미치지 않습니다.

결론:

인라인 블록 요소에 대한 세로 정렬 작업을 수행할 때 포함 블록이 아니라 요소의 줄 상자 내에서 콘텐츠를 정렬한다는 점을 이해하는 것이 중요합니다. 페이지 요소에서 원하는 수직 위치를 얻으려면 이 점을 명심하십시오.

위 내용은 컨테이너 내에서 인라인 블록 요소를 수직 정렬하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!