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

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

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

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

다음 예를 고려하세요.

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

HTML:

<div>
<p>이 경우, 수직 정렬: 중간을 인라인 블록 요소 #content에 적용하면 수직 정렬이 포함 블록 내의 수직 간격을 고려하지 않기 때문에 아무런 효과가 없습니다. 단순히 자체 라인 상자 내에서 요소를 정렬합니다.</p>
<p>수직 정렬의 기본 속성을 파악하면 향후 문제를 방지하고 HTML 및 CSS 코드에서 정확한 수직 위치 지정을 보장할 수 있습니다.</p>
</div>

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