Div 컨테이너 내부의 이미지를 수평 중앙에 배치하는 방법은 무엇입니까?

컨테이너 Div 내에서 이미지를 가로 가운데에 배치하는 방법

문제:

필요한 사항 포함된 div 요소 내에서 이미지를 수평으로 정렬합니다. 문제가 있는 설정에 대한 HTML 및 CSS는 다음과 같습니다.

<div>
<pre class="brush:php;toolbar:false">#thumbnailwrapper {
  ...
}

#artiststhumbnail {
  width: 120px;
  height: 108px;
  overflow: hidden;
}

해결 방법:

이미지를 컨테이너 내에서 가로 중앙에 배치하려면 다음 CSS를 사용하세요.

#artiststhumbnail a img {
    display:block;
    margin:auto;
}

이 코드는 이미지가 블록 요소로 표시되고 자동으로 표시되도록 지정합니다. 모든 면에 여백이 있습니다. 이렇게 하면 이미지가 컨테이너 내에서 수평 중앙에 배치됩니다.

설명:

디스플레이: block; 속성은 이미지가 블록 요소로 처리되어야 함을 지정합니다. 즉, 컨테이너의 전체 너비를 차지하고 주변 텍스트의 흐름이 중단됩니다.

여백: auto; 속성은 이미지의 모든 측면의 여백이 자동으로 설정되어야 함을 지정합니다. 이는 이미지가 컨테이너 내 중앙에 위치하도록 브라우저가 자동으로 여백을 계산한다는 의미입니다.

이 솔루션을 사용하면 컨테이너나 이미지의 크기에 관계없이 이미지가 컨테이너 내에서 수평 중앙에 위치하게 됩니다.