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

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

Vertical-Align의 범위

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

예:

다음 코드를 고려하세요.

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

문제:
이 예에서 수직 정렬: 중간을 설정하면 #content 요소가 수직으로 중앙에 배치되지 않습니다. #wrapper div.
설명:
수직 정렬은 그렇지 않습니다. 컨테이너 블록을 기준으로 인라인 블록 요소를 정렬하는 것이 아니라 자체 라인 상자 내에 정렬합니다. #content 요소에는 기본 수직 정렬: 기준선에 따라 이미 수직으로 중앙에 정렬된 텍스트만 포함되어 있으므로 최종 정렬에는 영향을 미치지 않습니다.
결론:
 
인라인 블록 요소에 대한 수직 정렬 작업을 수행할 때 포함 블록이 아니라 요소의 줄 상자 내에서 콘텐츠를 정렬한다는 점을 이해하는 것이 중요합니다. 페이지 요소에서 원하는 수직 위치를 얻으려면 이 점을 명심하십시오.