div의 중심에 맞추려는 SVG가 있습니다. div의 너비는 900px입니다. SVG의 너비는 400px입니다. SVG의 여백 왼쪽 및 여백 오른쪽이 자동으로 설정되어 있습니다. 작동하지 않으면 왼쪽 여백이 0 (기본값) 인 것처럼 작동합니다.
누구든지 내 오류를 알고 있습니까?
답변
SVG는 기본적으로 인라인입니다. display: block그것에 추가 하면 margin: auto예상대로 작동합니다.
답변
위의 답변은 저에게 효과적이지 않았습니다. 태그에 속성 preserveAspectRatio="xMidYMin"을 추가하는 <svg>것은 속임수였습니다. viewBox속성뿐만 아니라 작업이 지정 될 필요가있다. 출처 : Mozilla 개발자 네트워크
답변
위의 svg를 기본적으로 인라인으로 읽었으므로 div에 다음을 추가했습니다.
<div style="text-align:center;">그리고 그것은 나를 위해 속임수를했다.
순수 주의자들은 그것을 좋아하지 않을 수도 있지만 (텍스트가 아니라 이미지 임) 제 생각에는 HTML과 CSS가 엉망이되어 버렸기 때문에 그것이 정당하다고 생각합니다.
답변
이 답변들 중 어느 것도 나를 위해 일하지 않았습니다. 이것이 내가 한 방법입니다.
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);답변
위의 답변은 CSS 관점에서만 말하면 불완전하게 보입니다.
뷰포트 내에서 svg의 위치는 두 개의 svg 속성의 영향을받습니다
- viewBox : svg가 덮을 사각형 영역을 정의합니다.
- preserveAspectRatio : viewBox wrt 뷰포트를 배치 할 위치와 뷰포트가 변경되는 경우이를 strech하는 방법을 정의했습니다.
자세한 설명은 codepen에서이 링크를 따라 가십시오.
<svg viewBox="70 160 800 190" preserveAspectRatio="xMaxYMax meet">답변
나는 사용해야했다
display: inline-block;답변
CSS가 읽었는지 확인하십시오.
margin: 0 auto;왼쪽과 오른쪽을 자동으로 설정했다고 말하더라도 오류가 발생할 수 있습니다. 물론 코드를 보여주지 않았기 때문에 우리는 알지 못합니다.
