SVG를 디브에 어떻게 집중시킬 수 있습니까?

SVG를 디브에 어떻게 집중시킬 수 있습니까?

저는 디브에서 중심을 잡으려고 하는 SVG가 있습니다.div의 너비는 900px입니다.SVG의 폭은 400px입니다.SVG의 왼쪽 여백과 오른쪽 여백이 자동으로 설정됩니다.작동하지 않고 왼쪽 여백이 0(기본값)인 것처럼 작동합니다.

뭐가 잘못됐는지 아는 사람?

SVG는 기본적으로 인라인입니다.

더하다display: block그 다음에margin: auto예상대로 작동할 것입니다.

또는 레이아웃에 따라 SVG를 인라인으로 유지하고 설정할 수 있습니다.text-align: center대신 상위 요소에 있습니다.

또는 상위 요소의 플렉스 또는 그리드 레이아웃을 사용하여 SVG의 중심을 맞출 수 있습니다.

위의 답변은 저에게 효과가 없었습니다.속성 추가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%);

Flexbox는 또 다른 접근 방식입니다. 추가

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

그리고 추가합니다..container당신의 svg를 포함하는 div의 클래스.

위의 답변은 css 관점에서만 이야기하기 때문에 불완전해 보입니다.

뷰포트 내에서 svg의 위치는 두 개의 svg 속성에 의해 영향을 받습니다.

1. viewBox: svg가 포함할 사각형 영역을 정의합니다.
2. preserveAspectRatio: viewBox wrt 뷰포트를 배치할 위치와 뷰포트가 변경된 경우 이 뷰포트를 스트레치하는 방법을 정의했습니다.

자세한 설명을 보려면 코드펜의 이 링크를 따르십시오.

<svg viewBox="70 160 800 190" preserveAspectRatio="xMaxYMax meet">

나는 사용해야 했습니다.

display: inline-block;

컨테이너를 플렉스로 처리하고 플렉스 속성으로 svg 항목의 중심을 맞춥니다.

<div classname='icon'>
  <svg>.....</svg>
</div>

.icon{
  display:flex;
  align-items:center;
  justify-content:center;
 }

CSS가 다음과 같은지 확인합니다.

margin: 0 auto;

왼쪽과 오른쪽이 자동으로 설정되어 있다고 해도 오류가 발생할 수 있습니다.물론 당신이 코드를 보여주지 않았기 때문에 우리는 알 수 없습니다.

이 두 줄을 넣으세요.style.css지정한 항목에서div학급.

   display: block;
   margin: auto;

그리고 나서 실행하려고 하면, 당신은 그것을 볼 수 있을 것입니다.svg이제 중앙에 정렬됩니다.

다음과 같은 작업도 수행할 수 있습니다.

  <center>
    <div style="width: 40px; height: 40px;">
        <svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
            <use class="sqs-use--icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-icon">
                <svg id="twitter-icon" viewBox="0 0 64 64" width="100%" height="100%">
                    <path
                        d="M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z"
                        />
                </svg>
            </use>
        </svg>
    </div>
  </center>

이 사이에 코드를 넣으십시오.div부트스트랩을 사용하는 경우:

  <div class="text-center ">
  <i class="fa fa-twitter" style="font-size:36px "></i>
  <i class="fa fa-pinterest" style="font-size:36px"></i>
  <i class="fa fa-dribbble" style="font-size:36px"></i>
  <i class="fa fa-instagram" style="font-size:36px"></i>
  </div>

나에게, 해결책은 추가하는 것이었습니다.margin: 0 auto;를포는요위에소하함▁▁the에를 포함하는 요소 에.<svg>.

다음과 같이:

<div style="margin: 0 auto">
   <svg ...</svg>
</div>

위의 답변 중 하나도 저에게 효과가 없었습니다.SVG가 Google 아이콘에서 가져온 것이라면 다음을 시도해 보십시오.

display: inline-block;
width: 24px;
vertical-align: middle;

HTML:

<div class="wrap-center">
    <svg width="20px" height="20px"></svg>
</div>

CSS:

.wrap-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

답변 감사합니다만, 추가하기 위해 % 대신 px를 사용할 수 있습니다.

position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);

<div align="center">
  /* svg code */
</div>

이 코드는 SVG를 div 요소에 중심을 둡니다.

언급URL : https://stackoverflow.com/questions/8639383/how-do-i-center-a-svg-in-a-div