반응형 높이를 사용하여 Div에서 이미지를 수직 중앙에 배치하는 방법은 무엇입니까?

접근 방식

수직 정렬을 달성하기 위해 인라인 블록을 사용합니다. 위치, 상단, 높이, 텍스트 정렬과 같은 CSS 속성을 활용합니다. 작동 방식은 다음과 같습니다.

1. 의사 요소 생성

컨테이너 div의 첫 번째 하위 항목으로 인라인 블록 의사 요소를 추가합니다. 높이를 100%로 설정하여 컨테이너 높이를 채웁니다.

2. 수직 정렬

의사 요소와 이미지 모두 수직 정렬을 위해 수직 정렬 속성을 중간으로 설정하세요.

3. 간격 제거

의사 요소와 이미지 사이의 공백을 제거하려면 상위 div의 글꼴 크기를 0으로 설정하고 모든 텍스트 콘텐츠를 축소하세요.

구현

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

결과

이 기술을 사용하면 컨테이너의 반응 높이를 유지하면서 컨테이너 내에서 이미지를 수직으로 정렬할 수 있습니다.

<div class="container">
  <div class="img-container">
    <img src="..." alt="Image">
  </div>
</div>

이미지 크기의 최대 속성

.container {
  text-align: center;
  font: 0/0 a;
}

.container:before {
  content: " ";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.img-container {
  display: inline-block;
  vertical-align: middle;
}

이미지가 컨테이너 크기를 초과하지 않는 경우 이미지에 max-height 및 max-width 속성을 설정하는 것이 좋습니다.

위 내용은 반응형 높이를 사용하여 Div에서 이미지를 수직 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!