>  기사  >  웹 프론트엔드  >  왜 `margin: auto`를 사용하여 Div에서 내 SVG 센터를 사용할 수 없나요?

왜 `margin: auto`를 사용하여 Div에서 내 SVG 센터를 사용할 수 없나요?

Barbara Streisand
Barbara Streisand원래의
2024-11-01 02:08:28653검색

Why Won't My SVG Center in a Div Using `margin: auto`?

Scalable Vector Graphic(SVG)을 Div 내에서 중앙에 배치하는 방법

Div 내에서 SVG를 중앙에 배치하는 과정에서 다음과 같은 문제를 겪었습니다. 왼쪽 및 오른쪽 여백을 모두 자동으로 설정해도 효과가 없는 흥미로운 문제입니다. 수수께끼를 풀기 위해 기본 메커니즘을 자세히 살펴보겠습니다.

기본적으로 SVG는 인라인 요소로 간주됩니다. 즉, 위치 지정 시 텍스트처럼 동작합니다. 인라인 요소에 직접 여백을 적용하는 것은 효과가 없는 경향이 있습니다. 이 문제를 해결하려면 다음과 같은 몇 가지 옵션이 있습니다.

1. 강제 블록 표시:

SVG에 CSS 속성 표시: 블록을 추가합니다. 그러면 해당 요소가 블록 수준 요소로 변환되어 상위 div의 전체 너비를 차지할 수 있습니다. 이 설정으로 margin: auto를 설정하면 실제로 SVG가 수평으로 중앙에 배치됩니다.

2. 텍스트 정렬 활용:

레이아웃에 따라 SVG를 인라인으로 유지하고 대신 상위 요소에 text-align: center를 설정할 수 있습니다. 이렇게 하면 SVG를 포함한 모든 인라인 콘텐츠가 상위 너비 내에 정렬됩니다.

3. 가변 레이아웃 또는 그리드 레이아웃:

상위 요소에 가변 레이아웃 또는 그리드 레이아웃을 사용하는 것을 고려하세요. 이러한 최신 레이아웃 기술은 요소 위치 지정에 대한 더 강력한 제어 기능을 제공하며 justify-content: center 또는 Grid-template-columns: auto auto auto와 같은 기술을 사용하여 SVG를 중앙에 배치하는 데 사용할 수 있습니다.

위 내용은 왜 `margin: auto`를 사용하여 Div에서 내 SVG 센터를 사용할 수 없나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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