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

HTML의 수직 정렬: 한계 이해

요소를 수직으로 정렬하는 데 유용한 도구인 수직 정렬은 특정 HTML 요소로 제한됩니다. 인라인, 인라인 블록, 이미지 및 테이블. 텍스트 정렬과 달리 수직 정렬은 상위 요소가 아닌 하위 요소에 적용되어야 합니다.

이러한 지침에도 불구하고 일부 개발자는 수직 정렬:중간을 인라인 블록 요소에 적용하려고 할 때 어려움을 겪습니다. 그 이유를 이해하려면 라인 상자의 개념을 자세히 살펴봐야 합니다.

라인 상자와 수직 정렬

수직 정렬은 포함 블록 내에서 요소를 정렬하지 않지만 내부에서는 요소를 정렬합니다. 그들의 라인 박스. 줄 상자는 요소의 인라인 수준 콘텐츠를 둘러싸는 직사각형 영역입니다.

예를 들어 여러 줄로 된 단락 내의 각 텍스트 줄은 줄 상자를 구성합니다. 이것이

와 같은 인라인 콘텐츠에 수직 정렬이 완벽하게 작동하는 이유입니다. 태그.

예:

이 예에서 텍스트의 각 줄은 지정된 줄 덕분에 줄 상자 내에서 수직으로 정렬됩니다. height.

결론

컨테이닝 블록 내에서 수평으로 배치된 인라인 블록 요소에는 인라인 콘텐츠의 수직 정렬 기능이 부족합니다. 수직 정렬을 달성하려면 대체 방법을 사용하거나 인라인 블록을 블록 수준 요소로 변환하는 것을 고려해야 합니다.

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