Wie zentriere ich eine SVG in einem Div?

Ich habe eine SVG, die ich in einem Div zentrieren möchte. Das div hat eine Breite oder 900px. Das SVG hat eine Breite von 400px. Bei der SVG ist der Rand links und der Rand rechts auf automatisch eingestellt. Funktioniert nicht, es verhält sich nur so, als ob der linke Rand 0 ist (Standard).

Kennt jemand meinen Fehler?

SVG ist standardmäßig inline. Fügen Sie display: blockes hinzu und margin: autoes funktioniert dann wie erwartet.

Die obigen Antworten haben bei mir nicht funktioniert. Das Hinzufügen des Attributs preserveAspectRatio="xMidYMin"zum <svg>Tag hat jedoch den Trick getan. Das viewBoxAttribut muss angegeben werden, damit dies ebenfalls funktioniert. Quelle: Mozilla-Entwicklernetzwerk

Nachdem ich oben gelesen habe, dass svg standardmäßig inline ist, habe ich dem div gerade Folgendes hinzugefügt:

<div style="text-align:center;">

und es hat den Trick für mich getan.

Puristen mögen es vielleicht nicht (es ist ein Bild, kein Text), aber meiner Meinung nach haben HTML und CSS die Zentrierung durcheinander gebracht, daher denke ich, dass es gerechtfertigt ist.

Keine dieser Antworten hat bei mir funktioniert. So habe ich es gemacht.

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

Die obigen Antworten sehen unvollständig aus, da sie nur aus CSS-Sicht sprechen.

Die Positionierung von svg im Ansichtsfenster wird durch zwei svg-Attribute beeinflusst

1. viewBox: Definiert den Rechteckbereich, den SVG abdecken soll.
2. erveAspectRatio: Definiert, wo die viewBox im Ansichtsfenster platziert werden soll und wie sie gedehnt werden soll, wenn sich das Ansichtsfenster ändert.

Folgen Sie diesem Link von Codepen für eine detaillierte Beschreibung

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

Ich musste benutzen

display: inline-block;

Stellen Sie sicher, dass Ihr CSS lautet:

margin: 0 auto;

Obwohl Sie sagen, dass Sie links und rechts auf Auto eingestellt haben, liegt möglicherweise ein Fehler vor. Natürlich würden wir es nicht wissen, weil Sie uns keinen Code gezeigt haben.

Sie können dies auch tun:

<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>

Fügen Sie Ihren Code dazwischen ein, divwenn Sie Bootstrap verwenden :

  <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>

Flexbox ist ein weiterer Ansatz: add .container { display: flex; justify-content: center; }Und füge die .containerKlasse dem div hinzu, das dein svg enthält.

Für mich bestand die Lösung darin, margin: 0 auto;das Element hinzuzufügen , das das enthält <svg>.

So was:

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