인라인 블록 요소에서 수직 정렬이 예상대로 작동하지 않는 이유는 무엇입니까?

인라인 블록 요소의 수직 정렬 문제

수직 정렬은 일반적으로 인라인 요소, 인라인 블록, 이미지 및 테이블 스타일 지정에 기인합니다. 강요. 그러나 인라인 블록 요소에 적용하면 수직 정렬이 원하는 결과를 생성하지 못하는 경우가 많습니다. 그 이유를 이해하려면 수직 정렬 메커니즘을 자세히 살펴보아야 합니다.

수직 정렬은 상위 요소를 기준으로 줄 상자 내 콘텐츠 위치에 영향을 미칩니다. 라인 상자는 단일 라인의 모든 인라인 레벨 요소를 포함하는 직사각형 영역을 나타냅니다. 예시에서는:

#wrapper {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}

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

인라인 블록 요소 '#content'에는 너비와 높이가 모두 있어 자체 라인 상자를 만듭니다. 수직 정렬은 이 줄 상자 내에서 작동하며, 요소를 상위 요소 '#wrapper'가 아닌 수직으로 정렬합니다.

따라서 수직 정렬이 인라인 블록 요소에 적용될 때 요소를 다음과 같이 정렬합니다. 자체 라인 상자를 고려하여 상위 요소 내에 수직 정렬이 부족한 것으로 인식됩니다.

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