> 웹 프론트엔드 > CSS 튜토리얼 > 높이와 종횡비를 유지하면서 상위 Div 내에서 이미지를 중앙에 배치하는 방법은 무엇입니까?

높이와 종횡비를 유지하면서 상위 Div 내에서 이미지를 중앙에 배치하는 방법은 무엇입니까?

Barbara Streisand
풀어 주다: 2024-10-24 02:30:29
원래의
933명이 탐색했습니다.

How to Center an Image within a Parent Div While Preserving Height and Aspect Ratio?

상위 div 내 이미지 요소 중앙에 배치

상위 div 내에서 이미지를 중앙에 배치하려면 특정 CSS 기술이 필요합니다. 이를 달성하는 방법은 다음과 같습니다.

문제:

너비를 늘리지 않고 높이(100%)를 유지하면서 상위 div의 중간에 이미지를 정렬하는 방법 ?

예:

질문에 제공된 HTML 및 CSS를 고려하세요.

<code class="html"><div class="box">
  <img src='featured.jpg' />
</div></code>
로그인 후 복사
<code class="css">.box {
  height: 100%;
  width: 450px;
  border: 2px solid red;
  background: green;
  overflow: hidden;
}
.box img {
  height: 100%;
  width: auto;
  text-align: center;
}</code>
로그인 후 복사

해결책:

이미지를 중앙에 맞추려면 text-align: center;를 추가하세요. 하위 이미지 요소 대신 상위 div에 대한 CSS 선언:

<code class="css">.box {
  /* ... */
  text-align: center;  /* Align center all inline elements */
}</code>
로그인 후 복사

이미지를 포함하여 div 내의 모든 인라인 요소를 중앙에 배치합니다.

추가 개선 사항:

인라인 요소에 예약된 줄 높이로 인해 이미지 아래에 공백이 있을 수 있습니다. 이 간격을 제거하려면 수직 정렬: 하단; 이미지 CSS에:

<code class="css">.box img {
  /* ... */
  vertical-align: bottom;  /* Fix the vertical gap */
}</code>
로그인 후 복사

위 내용은 높이와 종횡비를 유지하면서 상위 Div 내에서 이미지를 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿