Div 내에서 이미지를 수평 및 수직 중앙에 배치하는 방법은 무엇입니까?

Div 내 중앙에서 이미지 정렬

웹 페이지 내에서 이미지의 올바른 정렬을 유지하는 것이 어려울 수 있습니다. 이 특정한 경우, 주어진 div 요소 내에서 이미지의 수평 및 수직 중심을 모두 달성하려면 타겟 접근 방식이 필요합니다.

원하는 정렬을 달성하려면 이미지가 수평으로 div 요소의 중앙에 배치되어야 합니다. 그리고 수직으로. 이를 위해 다음 CSS 속성을 사용할 수 있습니다.

body {
  margin: 0;
}

#over img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

이러한 속성의 작동 방식은 다음과 같습니다.

1. margin-left: auto; 및 margin-right: auto;: 이 속성은 이미지 요소의 왼쪽 및 오른쪽 여백을 자동으로 조정하여 상위 컨테이너(div 요소)의 중앙을 향해 밀어냅니다.
2. 디스플레이 : block;: 이 속성은 이미지 요소가 블록 수준 요소처럼 동작하여 상위 컨테이너의 전체 너비를 차지하도록 보장합니다. 이렇게 하면 이미지가 div 내의 다른 요소 위에 쌓이는 것을 방지할 수 있습니다.

이러한 CSS 속성을 사용하면 이미지가 div 요소의 중앙과 중앙에 배치되어 원하는 결과를 얻을 수 있습니다. 정렬합니다.

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