인라인 블록 요소에서 수직 정렬이 작동합니까?

수직 정렬: 인라인 블록에 대한 잘못된 개념

수직 정렬은 인라인 및 인라인 블록 요소에 쉽게 적용된다고 일반적으로 주장됩니다. , 이러한 믿음은 종종 실망을 안겨줍니다. 실제로 수직 정렬에는 인라인 블록 요소에 대해 효과가 없게 만드는 특정 목적이 있습니다.

둘러싸는 요소 내에서 텍스트의 수평 정렬을 설정하는 text-align과 달리 수직 정렬은 요소의 수직 정렬을 대상으로 합니다. 부모 요소가 아닌 둘러싸는 줄 상자와 관련하여. 줄 상자는 텍스트 줄이 차지하는 직사각형 공간을 의미합니다.

다음 예를 고려하세요.

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

HTML:

<div>

이 경우, 수직 정렬: 중간을 인라인 블록 요소 #content에 적용하면 수직 정렬이 포함 블록 내의 수직 간격을 고려하지 않기 때문에 아무런 효과가 없습니다. 단순히 자체 라인 상자 내에서 요소를 정렬합니다.

수직 정렬의 기본 속성을 파악하면 향후 문제를 방지하고 HTML 및 CSS 코드에서 정확한 수직 위치 지정을 보장할 수 있습니다.

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