'vertical-align: middle'이 인라인 콘텐츠를 항상 수직으로 중앙에 배치하지 않는 이유는 무엇입니까?

Vertical-align의 예상치 못한 결과: 콘텐츠 정렬 불량

웹 디자인 영역에서 수직 정렬은 요소를 수직으로 배치하는 데 중요한 역할을 합니다. . 그러나 의도한 정렬이 실패하여 콘텐츠 정렬이 잘못되는 경우가 있습니다.

다음 예를 고려하세요.

p {
  background: yellow
}

span {
  display: inline-block;
  vertical-align: middle;
  height: 50px;
  background: pink;
}

<p>Hello <span>What in the</span> World?</p>

이 시나리오에서는 범위 요소는 주변 단락 내에서 수직으로 정렬됩니다. 그런데, 스팬에 수직 정렬: 중간을 적용하면 예상치 못한 결과가 발생합니다. 스팬의 내용을 제외한 전체 단락이 수직으로 정렬됩니다.

이러한 정렬 오류는 왜 발생합니까? 이는 버그가 아니라 수직 정렬의 예상되는 동작입니다. Vertical-align은 요소의 수직 정렬을 지정하며, 이 경우 범위는 단락 내에서 중앙에 맞춰집니다. 범위 콘텐츠에 정렬이 없으면 브라우저가 범위 자체의 높이보다 작은 자연 높이에 따라 콘텐츠를 렌더링하고 있음을 나타냅니다.

잘못된 정렬을 제거하려면 세로 정렬을 조정할 수 있습니다. 수직 정렬을 수정하여 범위 내용의 변경:

span {
  position: relative;
  vertical-align: middle;
  top: 50%;
  transform: translateY(-50%);
}

위 내용은 'vertical-align: middle'이 인라인 콘텐츠를 항상 수직으로 중앙에 배치하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!