페이지에서 세 개의 SVG 파일을 가운데 정렬하는 방법은 무엇입니까?

Question

서로 겹칠 때 단일 그래픽을 만드는 세 개의 개별 SVG 파일이 있습니다. 첫 번째 SVG 파일은 빨간색 삼각형이고, 두 번째 파일은 삼각형 내부의 파란색 원이고, 세 번째 파일은 삼각형 밑면에 있는 보라색 직사각형입니다(삼각형과 직사각형 사이에 약간의 공간이 있음). 내 목표는 세 개의 SVG 파일을 모두 페이지 중앙에 서로 포개어 두는 것입니다. 아래는 내 HTML 및 CSS 코드입니다.

으아악 으아악

내 CSS에서 볼 수 있듯이 —position:absolute; 및 position:relative;를 사용해 보았지만 여전히 페이지 중앙에서 서로 올바르게 겹치도록 할 수 없습니다. SVG 파일이 적절하게 중앙에 배치되면 @keyframes를 사용하여 SVG 파일에 애니메이션을 적용할 것이며, (다른 방법이 없는 한) 개별적으로 애니메이션을 적용해야 하므로 페이지에서 각 SVG 파일의 위치를 ​​고정할 수 없습니다. (즉, 이동할 수 있어야 합니다). 누구든지 도와줄 수 있나요? 미리 감사드립니다.

Answer 1

세 개의 SVG 파일을 가운데 정렬하고 포함하려면 Flexbox와 절대 위치 지정을 사용할 수 있습니다. 다음은 HTML 및 CSS 코드의 업데이트된 버전입니다.

으아악 으아악

"그래픽" 클래스가 있는 외부 div는 Flexbox를 사용하여 SVG 파일을 가로 및 세로로 정렬합니다. 이렇게 하면 페이지 중앙에 배치됩니다.

각 SVG 파일의 위치는 서로 겹쳐질 수 있도록 절대 위치로 설정되어 있습니다.

원형 SVG 파일은 margin: auto를 사용하고 모든 측면(상단, 오른쪽, 하단, 왼쪽)을 0으로 설정하여 상위 div 내 중앙에 배치됩니다. 이렇게 하면 원이 삼각형 내에서 수평 및 수직으로 중앙에 배치됩니다.

하단 속성을 사용하여 직사각형 SVG 파일을 하단에 배치합니다. "하단" 값을 조정하여 삼각형과 직사각형 사이의 공간을 늘리거나 줄일 수 있습니다.

Answer 2

모두 동일한 그리드 행과 열에 배치하세요.

으아악 으아악