너비가 다를 때 Div 내에서 SVG를 중앙에 배치하는 방법은 무엇입니까?

Div 내에서 SVG 정렬

Div 내에서 SVG를 중앙에 배치하는 것은 어려울 수 있으며, 특히 div와 SVG의 너비가 다른 경우 더욱 그렇습니다. 질문에 제시된 문제를 조사하고 잠재적인 해결 방법을 살펴보겠습니다.

문제 설명

사용자가 margin-left: auto 및 margin-right: auto를 사용하여 div 내에서 SVG를 중앙에 배치하려고 합니다. 그러나 SVG는 margin-left가 0으로 설정된 것처럼 왼쪽 정렬을 유지합니다.

해결 방법

이 문제는 기본적으로 SVG가 인라인 콘텐츠이기 때문에 발생합니다. 블록 수준으로 만들려면 명시적으로 display: block을 지정해야 합니다. 이렇게 하면 margin: auto가 의도한 대로 작동하고 div 내에서 SVG를 중앙에 배치합니다.

<code class="CSS">svg {
  display: block;
  margin: auto;
}</code>

대체 접근 방식

1. 텍스트 정렬: SVG의 디스플레이를 수정하는 대신 text-align: center를 사용하여 상위 요소 내에서 정렬할 수 있습니다. 이 접근 방식은 SVG를 인라인으로 유지하지만 상위 항목의 중앙에 배치합니다.
2. 플렉스/그리드 레이아웃: 플렉스 또는 그리드 레이아웃은 또 다른 대안을 제공합니다. 상위 요소를 플렉스 또는 그리드 컨테이너로 설정하면 align-items 또는 justify-items 속성을 사용하여 SVG를 중앙에 배치할 수 있습니다.

요약하자면, SVG가 블록으로 표시되는지 확인하세요. level 요소(display: block)를 사용하면 중앙 정렬에 margin: auto를 사용할 수 있습니다. 또는 text-align: center 또는 flex/grid 레이아웃을 사용하여 상위 요소 내에서 SVG를 효과적으로 정렬할 수도 있습니다.

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