여러 줄에 걸친 인라인 블록 요소에서 수직 정렬이 작동하지 않는 이유는 무엇입니까?

인라인 블록 요소를 정렬하지 않는 수직 정렬: 숨겨진 이유 공개

수직 정렬은 포함 블록 내에서 요소를 수평으로 배치하는 데 종종 사용됩니다. . 그러나 수직 정렬은 인라인 및 인라인 블록 요소, 이미지 및 테이블 요소에만 적용된다는 점에 유의하는 것이 중요합니다. 또한 텍스트 정렬과 달리 상위 요소가 아닌 하위 요소에 적용해야 합니다.

이러한 이해에도 불구하고 일부 사용자는 인라인 블록 요소에서 수직 정렬: 중간을 설정하는 상황이 발생할 수 있습니다. 원하는 결과를 얻지 못함. 이는 수직 정렬이 포함 블록이 아닌 라인 상자 내에서 인라인 수준 콘텐츠를 정렬하기 때문입니다.

라인 상자는 인라인 수준 요소에 의해 생성된 상자를 포함하는 직사각형 영역입니다. 텍스트가 여러 줄로 줄바꿈되면 각 ​​줄은 자체 줄 상자를 형성합니다. 예를 들어 텍스트 한 줄에 수직 정렬을 적용하면 해당 줄 상자 내의 수직 위치에만 영향을 미치며 상위 요소 내의 전체 위치에는 영향을 미치지 않습니다.

인라인 블록 요소의 수직 정렬을 달성하려면 여러 줄에 걸쳐 flexbox, CSS 그리드 또는 상위 요소의 명시적 높이 값과 같은 다른 기술을 사용하는 것이 좋습니다.

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