Div 내에서 이미지를 수평 및 수직 중앙에 어떻게 배치합니까?

Div 내 중심 맞추기: 시각적 정렬 달성

웹 개발 영역에서 요소 정렬은 시각적으로 매력적이고 기능적인 디자인을 만드는 데 매우 중요합니다. . div 내에서 이미지를 처리할 때 수평 및 수직 중앙에 위치하는 것이 중요합니다.

다음 HTML 스니펫을 고려하세요.

<div>
<p>기본적으로 이미지는 다음 위치에 배치됩니다. div의 왼쪽 상단 모서리. 완벽한 중앙 정렬을 달성하려면 CSS 속성의 조합이 필요합니다:</p>
<p><strong>수평 중앙 정렬:</strong><br>이미지를 수평 중앙에 배치하려면 다음 CSS 규칙이 사용됩니다.</p>
<pre class="brush:php;toolbar:false">#over img {
  margin-left: auto;
  margin-right: auto;
}

이 코드는 이미지 내에서 동일한 간격이 유지되도록 브라우저에 이미지의 왼쪽 및 오른쪽 여백을 자동으로 조정하도록 지시합니다. 컨테이너.

수직 센터링:
수직 센터링의 경우 디스플레이 속성이 작동합니다.

#over img {
  ...
  display: block;
}

display: block 설정은 이미지가 다음과 같이 동작하도록 보장합니다. div 내에서 사용 가능한 전체 너비를 차지하는 블록 수준 요소입니다.

이러한 결합된 CSS 규칙은 이미지와 div 모두의 중앙에 효과적으로 배치됩니다. 수평 및 수직으로 정렬되어 div 내에서 이미지가 완벽하게 정렬됩니다.