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

상위 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!