Div 내에서 인라인/인라인 블록 요소를 `수직 정렬` 가운데에 맞추지 못하는 이유는 무엇입니까?

인라인/인라인 블록 요소를 수직으로 정렬

div 내에서 여러 인라인 및 인라인 블록 요소를 수직으로 정렬하려는 시도에서 사용자는 범위 요소가 컨테이너 내에서 예상보다 낮은 위치에 유지되는 문제에 직면합니다. 수직 정렬을 적용했음에도 불구하고:중간; 수직 정렬:상단; 범위에 대해서는 정렬이 변경되지 않습니다.

CSS 속성 수직 정렬은 텍스트 기준선에 대한 요소의 수직 위치를 제어합니다. 그러나 이 속성은 부모가 아닌 정렬되는 요소에 적용됩니다. div 내의 하위 요소를 수직으로 정렬하려면 사용자는 대신 하위 요소를 직접 대상으로 지정해야 합니다.

div > * {
    vertical-align:middle;  // Align children to middle of line
}

이 수정된 코드는 div 내의 모든 하위 요소가 수직 중앙에 위치하도록 보장합니다. 수직 정렬은 상위 div의 전체 높이가 아니라 현재 텍스트 줄을 기준으로 요소를 정렬합니다. 중앙에 요소가 있는 더 큰 div를 생성하려는 경우 높이 대신 line-height 속성을 사용할 수 있습니다. 실제 예제를 보려면 제공된 jsfiddle 링크를 참조하세요:

[jsfiddle link]

위 내용은 Div 내에서 인라인/인라인 블록 요소를 `수직 정렬` 가운데에 맞추지 못하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!