인프런 커뮤니티 질문&답변
작성한 질문수
svg 내부 요소들 center 정렬하기
작성
·
6.3K
0
안녕하세요!
강의 잘보고 있습니다.
예제를 조금 수정해서 이것저것 바꿔보고 있는데
혹시 svg 안의 요소들을 center 정렬하는 방법이 따로 있을까요?
제가 시도해본 방법은
1.
svg안에 class를 주고,
display: flex; justify-content: center; align-items: center;
2. svg안쪽에서 가장 최상위 요소에,
top: 0; left:0; bottom: 0; right: 0; margin: auto;
그런데 위의 두 방식은 전혀 동작하지 않더라구요.
그래서 지금 preserveAspectRatio 속성을 이용해서 적용해볼까 하는데
혹시 간단한 방법이 있을까요?
감사합니다 :)
답변 1
1
1분코딩
지식공유자
SVG 내부의 요소들은 일반 HTML 요소들과 달리 x, y 좌표를 기준으로 위치를 잡기 때문에
일반적인 CSS 정렬 방식으로 제어는 안되고요,
크기 표시 방식에 따라 viewBox나 width, height의 센터로 직접 잡아줘야합니다.
혹시 더 편하고 좋은 방법을 발견하시면 알려주세요 :)