>웹 프론트엔드 >CSS 튜토리얼 >Div 내부의 이미지를 수평 중앙에 배치하는 방법은 무엇입니까?

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

Susan Sarandon
Susan Sarandon원래의
2024-12-22 15:59:15473검색

How to Horizontally Center an Image Inside a Div?

Div 컨테이너 내에서 이미지를 가로로 정렬

질문:

가로로 정렬하는 방법 div 컨테이너 내에 있는 이미지 정렬 요소?

세부정보:

제공된 HTML 및 CSS 코드에는 컨테이너 및 이미지 요소에 필요한 구조가 포함되어 있지만 이미지는 중앙에 있지 않습니다.

해결책:

이미지를 수평 중앙에 효과적으로 배치하려면 다음을 적용하세요. 이미지에 대한 CSS 규칙:

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

이 조정을 통해 이미지가 블록 요소로 표시되도록 설정되어 여백 적용이 가능해집니다. 그 후, 자동 여백 설정은 브라우저가 동일한 왼쪽 및 오른쪽 여백을 자동으로 계산하고 적용하여 이미지를 중앙에 배치하도록 지시합니다.

시각적 확인:

이 솔루션을 시연하려면 , 방문: http://jsfiddle.net/marvo/3k3CC/2/

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.