인라인 블록 요소가 수직으로 잘못 정렬되는 이유는 무엇입니까?

인라인 블록 요소의 세로 정렬 오류 미스터리 공개

인라인 블록 요소의 콘텐츠가 세로로 잘못 정렬되어 나타나는 수수께끼 같은 CSS 문제 발생 ? 원인은 기본 수직 정렬 값일 수 있습니다.

인라인 블록 요소에는 상자의 기준선을 상위 요소의 기준선과 정렬하는 기준선의 기본 수직 정렬이 있습니다. 요소에 인플로우 라인 상자가 없거나 표시 이외의 오버플로 값이 있는 경우 예기치 않은 정렬이 발생할 수 있습니다.

다음 HTML 및 CSS를 고려하세요.

<div>

#divBottomHeader {
  height: 43px;
}
.divAccountPicker {
  width: 200px;
  height: 40px;
}
.divAccountData {
  width: 400px;
  height: 40px;
}

이 예에서 ".divAccountData" 요소는 ".divAccountPicker"에 비해 아래쪽으로 이동된 것으로 나타납니다. ".divPutTextToFixIssue"에 텍스트를 추가하면 요소가 마술처럼 수직으로 정렬됩니다.

이 동작은 인라인 블록 요소의 기준선이 마지막 줄 상자의 기준선에 의해 결정된다는 사실에서 발생합니다. ".divPutTextToFixIssue"에 텍스트를 추가하여 기준선을 효과적으로 변경하고 정렬을 위쪽으로 강제했습니다.

그러나 두 블록에 서로 다른 줄 수가 포함되어 있으면 정렬이 다시 중단됩니다. 일관된 수직 정렬을 보장하려면 수직 정렬 속성을 사용하여 강제로 정렬하십시오.

.divAccountData {
  vertical-align: top;
}

이렇게 하면 줄 수에 관계없이 ".divAccountData"의 기준선이 ".divAccountPicker"의 상단에 정렬됩니다.

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