CSS에서 인라인/인라인 블록 요소를 수직으로 정렬하려면 어떻게 해야 합니까?

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

수직 정렬 레이아웃을 만들 때 CSS의 수직 정렬을 이해하는 것이 중요할 수 있습니다. 적절한 수직 정렬 속성을 적용했음에도 불구하고 요소가 예측할 수 없게 계속 이동할 수 있습니다.

제공된 예를 들어보세요.

<div>
  <a></a><a></a>
  <span>Some text</span>
</div>

여기서 두 가지 "수직 정렬"을 모두 적용했음에도 불구하고 범위 요소가 계속 아래로 밀린 상태로 유지됩니다. :가운데;" 및 "vertical-align:top;".

이 문제를 해결하는 열쇠는 "수직 정렬"이 부모 컨테이너가 아닌 정렬되는 요소에 적용된다는 점을 이해하는 것입니다. "div" 요소의 하위 요소를 수직으로 정렬하려면 CSS 규칙을 사용하세요.

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

이 변경으로 "div" 요소의 하위 요소는 상위 div 내에서 수직으로 정렬됩니다.

참고: "세로 정렬"은 컨테이너 div의 전체 높이가 아니라 현재 텍스트 줄을 기준으로 정렬됩니다. 더 큰 상위 div 내의 요소를 중앙에 배치하려면 높이 대신 상위 div의 "line-height" 속성을 설정하세요. 실제 예를 보려면 원래 질문에 제공된 jsfiddle 링크를 참조하세요.

위 내용은 CSS에서 인라인/인라인 블록 요소를 수직으로 정렬하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!