Div 내에서 인라인/인라인 블록 요소를 수직으로 정렬하는 방법은 무엇입니까?

인라인/인라인 블록 요소의 CSS 수직 정렬

div 내에서 인라인 또는 인라인 블록 요소를 수직으로 정렬하려고 하면 다음과 같습니다. 수직 정렬 속성은 상위 요소가 아닌 하위 요소와 관련이 있다는 점에 유의해야 합니다. 제공된 HTML 및 CSS에서는 div 요소에 수직 정렬이 적용되어 범위가 완고하게 아래로 이동합니다.

요소를 수직으로 올바르게 정렬하려면 div 내의 하위 요소에 수직 정렬 속성을 적용하세요. :

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

이 수정을 통해 div 내의 모든 인라인 및 인라인 블록 요소가 의도한 대로 수직으로 정렬됩니다. [https://jsfiddle.net/dfmx123/TFPx8/1186/](https://jsfiddle.net/dfmx123/TFPx8/1186/)

추가 참고:

세로 정렬은 상위 div의 높이가 아닌 현재 텍스트 줄을 기준으로 합니다. 정렬된 요소보다 큰 div 내에서 세로 중심을 맞추려면 높이 대신 div의 line-height 속성을 설정하세요. 데모를 보려면 업데이트된 JSFiddle 예제를 참조하세요.

위 내용은 Div 내에서 인라인/인라인 블록 요소를 수직으로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!