CSS를 사용하여 Div 컨테이너 내에서 SVG를 중앙에 배치하는 방법은 무엇입니까?

CSS를 사용하여 Div 컨테이너 내에서 SVG를 중앙에 배치

div 내에서 SVG를 중앙에 배치하려고 할 때 div 및 SVG가 다음과 같은 경우 문제가 발생할 수 있습니다. 여백을 "자동"으로 설정했음에도 불구하고 너비가 다양합니다.

문제 이해:

SVG는 기본적으로 인라인 요소로 렌더링됩니다. 즉, 텍스트처럼 동작하므로 "margin: auto"를 설정하면 왼쪽과 오른쪽 여백에만 영향을 미칩니다. 귀하의 경우 기본 왼쪽 여백 0은 영향을 받지 않고 유지되어 중앙에서 오프셋이 발생합니다.

해결책:

1. 디스플레이 설정: 블록:

CSS에 "display: block"을 추가하여 SVG를 블록 요소로 변환합니다. 이렇게 하면 "margin: auto"를 사용하여 div 내에서 SVG를 가로 중앙에 배치할 수 있습니다.

예:

svg {
  display: block;
  margin: auto;
}

2. 텍스트 정렬 사용: 가운데:

SVG를 인라인 요소로 유지하고 상위 div에 "text-align: center"를 설정합니다. 이렇게 하면 SVG를 포함한 모든 인라인 요소가 div 중앙에 정렬됩니다.

예:

div {
  text-align: center;
}

svg {
  margin: 0 auto;
}

3. 플렉스 또는 그리드 레이아웃:

또는 플렉스 또는 그리드 레이아웃을 활용하여 상위 요소 내에서 SVG를 중앙에 배치합니다.

Flexbox:

.container {
  display: flex;
  justify-content: center;
}

svg {
  margin: auto;
}

그리드:

.container {
  display: grid;
  justify-content: center;
}

svg {
  grid-column: 1;
}

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