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

유연한 높이를 사용하여 Div 내에서 이미지를 수직으로 정렬하는 방법

문제:

다음과 같은 div 컨테이너가 있습니다. 너비 변화에 비례하여 조정되는 반응형 높이입니다. 이 컨테이너에는 높이가 다양한 이미지가 있습니다. 귀하의 과제는 높이에 관계없이 컨테이너 중앙에 이미지를 수직으로 정렬하는 것입니다.

해결책:

이 반응형 환경에서 수직 정렬을 달성하려면 다음을 소개합니다. 이미지 옆에 인라인 요소를 배치하는 혁신적인 접근 방식입니다.

세로 정렬:

1. 의사 요소 생성: .img-container(이미지를 호스팅하는) 내에서 블록 수준(의사) 요소를 직접 생성합니다.
2. 높이 조정: 이 의사 요소는 수직으로 확장됩니다. 사용 가능한 모든 높이를 소비하여 컨테이너 높이와 일치하도록 100% 높이를 적용합니다.
3. 요소의 수직 정렬: 의사 요소와 이미지 모두 수직 정렬을 얻습니다: 중간; 스타일을 지정하여 줄 내에서 적절한 정렬을 보장합니다.
4. 글꼴 크기 제거: 이러한 요소 사이의 공백을 제거하기 위해 글꼴 크기: 0;

이 접근 방식의 이점:

• 동적 컨테이너 크기
• 명시적인 높이 지정 없이 자동 이미지 정렬
• 가변 콘텐츠가 있는 div와 같은 다른 요소 정렬의 다양성 (텍스트를 표시하려면 글꼴 크기를 다시 조정하세요)

반응형 컨테이너:

컨테이너의 높이를 너비에 따라 유연하게 만들기 위해 우리는 padding-top 속성:

• 100% padding-top: 높이와 높이가 동일한 정사각형을 만듭니다. 너비
• 높은 백분율 값(예: 150% 또는 200%): 높이가 너비보다 큰 비율입니다

이 패딩 기술은 하위 div 또는 CSS에도 적용할 수 있습니다. 의사 요소.

콘텐츠 배치:

패딩 탑은 컨테이너 내 콘텐츠 위 및/또는 아래에 과도한 공간을 만듭니다. 이 문제를 해결하기 위해 콘텐츠를 래퍼 요소로 묶습니다.

• 절대 위치 지정: 일반 문서 흐름에서 래퍼를 제거하여 컨테이너의 전체 공간을 채울 수 있도록 합니다.
• 맨 위로 , 오른쪽, 아래쪽 및 왼쪽 속성: 래퍼를 확장하여 컨테이너의 차원.

최종 구현:

이러한 기술을 결합하여 목표를 달성합니다.

<div class="responsive-container">
  <div class="dummy"></div>
  <div class="img-container">
    <img src="image.jpg" alt="Image">
  </div>
</div>

.responsive-container {
  width: 60%;
  height: 300px;  /* Example height for demo purposes */
  position: relative;
}

.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;
  max-height: 100%;  /* Optional: Ensures image stays within container */
  max-width: 100%;   /* Optional: Ensures image stays within container */
}

데모:

[이미지 수직 정렬 반응형 부문](https://codepen.io/cristianorocha/pen/dywbQMV)

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