인라인 블록 요소가 수직으로 잘못 정렬되는 이유는 무엇이며 어떻게 해결할 수 있습니까?

인라인 블록 요소의 세로 정렬 불일치

콘텐츠가 있는 인라인 블록 요소가 세로로 표시되는 이유 정렬이 잘못되었나요?

설명:

CSS 속성 Vertical-align은 기본적으로 요소의 기준선을 상위 요소의 기준선에 맞춰 정렬합니다. 요소에 인플로우 라인 상자가 없거나 해당 오버플로 속성이 표시되지 않는 경우 기준선은 아래쪽 여백 가장자리에 정렬됩니다.

제공된 예에서 .divAccountData 요소에는 처음에 콘텐츠가 부족합니다. 결과적으로 해당 기준선은 상위 요소의 아래쪽 여백 가장자리에 정렬되어 .divAccountPicker 요소와 잘못 정렬됩니다.

해결책:

두 요소를 수직으로 정렬하려면, .divAccountData 요소의 수직 정렬 속성을 다음으로 설정합니다. top:

.divAccountData {
  vertical-align: top;
  /* Other CSS properties... */
}

이렇게 하면 .divAccountData 요소의 기준선이 .divAccountPicker 요소의 위쪽 가장자리와 정렬됩니다.

추가 고려 사항:

• 텍스트를 추가하여 문제를 해결할 수도 있습니다. .divAccountData 요소는 인플로우 라인 상자를 설정하고 기준선을 재설정합니다.
• 기준선 정렬은 각 요소의 라인 수에 영향을 받습니다. 줄 수가 다를 경우 두 요소 모두에 수직 정렬: 상단을 사용하여 수직 정렬을 강제로 적용해야 합니다.

위 내용은 인라인 블록 요소가 수직으로 잘못 정렬되는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!