반응형 크기의 Div 내에서 이미지를 수직 중앙에 배치하는 방법은 무엇입니까?

반응형 높이를 사용하여 Div 내부의 이미지를 수직으로 정렬

문제

동적 높이를 가진 div 내부의 이미지를 어떻게 수직으로 정렬할 수 있습니까? 정사각형 모양을 유지하기 위해 브라우저 창 크기를 조정할 때 너비에 맞게 조정됩니다. 비율?

수직 정렬

이를 달성하려면 다음 기술을 사용할 수 있습니다.

1. 인라인 블록 의사 요소 생성: 상위 div의 첫 번째(또는 마지막) 하위 요소로서 높이가 100%인 의사 요소가 생성되어 전체 상위 div를 차지합니다. height.
2. 세로 정렬 설정: 수직 정렬 속성은 의사 요소와 이미지 요소 모두에 적용되어 컨테이너 중앙에 수직으로 정렬됩니다.
3. 공백 제거: 인라인 블록 사이의 공백을 제거하기 위해 부모에 글꼴 크기 0이 설정됩니다. 요소.

이점

• 컨테이너(상위 div)는 동적 크기를 가질 수 있어 너비에 따라 높이가 변경될 수 있습니다.
• 이미지 요소의 크기는 명시적으로 지정할 필요가 없습니다.
• 이 기술은 div 요소를 동적 콘텐츠와 수직으로 정렬하는 데에도 사용할 수 있습니다. 하지만 포함된 텍스트를 표시하려면 div의 글꼴 크기를 재설정해야 합니다.

반응형 컨테이너

높이가 너비에 따라 조정되는 반응형 컨테이너를 만들려면 다음을 수행할 수 있습니다. 상단/하단 패딩 또는 여백 속성에 백분율 값을 적용합니다.

세로 정렬과 반응형 결합 컨테이너

수직 정렬과 반응형 컨테이너를 모두 구현하려면 절대 위치 지정을 사용하여 래퍼 div의 이미지 요소를 래핑하고 확장하여 컨테이너의 전체 공간을 채울 수 있습니다.

코드 예

<div class="responsive-container">
  <div class="dummy"></div>

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

.responsive-container {
  width: 60%;
  position: relative;
}

.dummy {
  padding-top: 100%; /* maintains 1:1 aspect ratio */
}

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

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

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

이 코드는 반응형 컨테이너 내에서 이미지를 수직으로 정렬하는 방법을 보여줍니다. 여기서 컨테이너의 높이는 사용 가능한 크기에 따라 조정됩니다. 너비.

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