> 웹 프론트엔드 > CSS 튜토리얼 > Div 내에서 SVG를 중앙에 배치하는 방법: Margin: Auto가 작동하지 않는 이유와 해결 방법은 무엇입니까?

Div 내에서 SVG를 중앙에 배치하는 방법: Margin: Auto가 작동하지 않는 이유와 해결 방법은 무엇입니까?

Barbara Streisand
풀어 주다: 2024-11-04 04:07:30
원래의
1079명이 탐색했습니다.

How to Center an SVG Within a Div: Why Margin: Auto Doesn't Work and How to Fix It?

Div 내에서 SVG를 완벽하게 정렬하는 방법

Div에 SVG(Scalable Vector Graphic)를 추가할 때 정렬이 필수입니다. 원하는 레이아웃을 정확하게 얻을 수 있습니다. 다음은 이 주제에 관한 일반적인 질문과 해결 방법입니다.

질문:

Div 내에서 SVG를 중앙에 배치하려고 하는데 제대로 작동하지 않습니다. div의 너비는 900px이고 SVG의 너비는 400px입니다. SVG의 왼쪽 여백과 오른쪽 여백을 자동으로 설정했는데 왼쪽 여백이 0인 것처럼 작동합니다. 무엇이 문제일까요?

답변:

CSS에서 SVG는 기본적으로 인라인 요소입니다. 즉, 텍스트처럼 동작합니다. 따라서 블록 요소처럼 여백 설정에 응답하지 않습니다. 이 문제를 해결하려면 SVG에 display: block을 추가하여 블록 요소로 만들어야 합니다. 이렇게 하면 margin: auto가 예상대로 작동하여 div 내의 SVG를 중앙에 배치할 수 있습니다.

또는 레이아웃에 따라 SVG를 인라인으로 유지하고 text-align: center를 상위 요소에 설정할 수도 있습니다. 이렇게 하면 SVG를 포함한 모든 인라인 요소가 상위 요소의 중앙에 정렬됩니다.

또 다른 옵션은 상위 요소의 가변상자 또는 그리드 레이아웃을 활용하고 센터링 속성을 사용하여 그 안의 SVG를 정렬하는 것입니다. 이 접근 방식은 레이아웃 제어에 더 많은 유연성을 제공하며 다양한 시나리오에서 유용할 수 있습니다.

위 내용은 Div 내에서 SVG를 중앙에 배치하는 방법: Margin: Auto가 작동하지 않는 이유와 해결 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿