백분율 기반 수직 패딩이 실패하는 이유는 무엇이며 CSS에서 수직 정렬을 위해 백분율 높이를 어떻게 사용할 수 있습니까?

상위 컨테이너 높이의 백분율을 사용하여 패딩 및 여백을 제어하는 ​​방법

CSS에서는 패딩 상단을 사용하여 수직 정렬을 제어할 수 있습니다. 재산. 그러나 이 속성을 높이 대신 상위 컨테이너 너비의 백분율로 설정하면 바람직하지 않은 동작이 발생할 수 있습니다.

원래 시도:

.base {
  background-color: green;
  width: 200px;
  height: 200px;
  overflow: auto;
  position: relative;
}

.vert-align {
  padding-top: 50%;
  height: 50%;
}

예기치 못한 결과 동작:

폭을 변경할 때 .base 컨테이너, padding-top이 백분율로 설정되었음에도 불구하고 수직 정렬이 끊어졌습니다. 이는 수직 패딩과 여백이 상위 컨테이너 너비의 백분율로 계산되기 때문입니다.

해결책:

padding-top을 사용하는 대신 top 속성을 사용하여 수직 정렬을 제어합니다. top은 상위 컨테이너 높이의 백분율로 계산됩니다.

.base {
  background-color: green;
  width: 200px;
  height: 200px;
  overflow: auto;
  position: relative;
}

.vert-align {
  position: absolute;
  top: 50%;
}

이 중첩된 div 구조는 상위 컨테이너 내부에 하위 div를 배치하고 수직으로 정렬합니다.

<div class="base">
  <div class="vert-align">
    Content Here
  </div>
</div>

top을 사용하여 padding-top 대신 하위 div는 너비에 관계없이 상위 컨테이너 상단에서 50% 아래에 배치됩니다. 이렇게 하면 상위 항목의 너비가 변경되더라도 수직 정렬이 보장됩니다.

위 내용은 백분율 기반 수직 패딩이 실패하는 이유는 무엇이며 CSS에서 수직 정렬을 위해 백분율 높이를 어떻게 사용할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!