it-swarm.com.de

Wie zentriere ich eine SVG in einem div?

Ich habe ein SVG, das ich versuche, in einem div zu zentrieren. Das div hat eine Breite oder 900px. Die SVG hat eine Breite von 400px. Bei der SVG sind Rand-Links und Rand-Rechts auf Auto eingestellt. Funktioniert nicht, es verhält sich nur so, als ob der linke Rand 0 ist (Standard).

Kennt jemand meinen Fehler?

215
Don P

SVG ist standardmäßig inline. Hinzufügen display: block dazu und dann margin: auto funktioniert wie erwartet.

396
Spadar Shut

Die obigen Antworten haben bei mir nicht funktioniert. Hinzufügen des Attributs preserveAspectRatio="xMidYMin" zum <svg> tag hat den Trick gemacht. Damit dies auch funktioniert, muss das viewBox -Attribut angegeben werden. Quelle: Mozilla-Entwicklernetzwerk

24
Esger

Nachdem ich oben gelesen habe, dass svg standardmäßig inline ist, habe ich dem div 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, und ich denke, es ist gerechtfertigt.

23
David

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%);
18
Ryan

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. preserveAspectRatio: Definiert, wo das Ansichtsfenster viewBox wrt platziert werden soll und wie es bei Änderungen des Ansichtsfensters verteilt werden soll.

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

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

Ich musste verwenden

display: inline-block;
4

stellen Sie sicher, dass Ihre CSS lautet:

margin: 0 auto;

Obwohl Sie sagen, Sie haben links und rechts auf Auto eingestellt, können Sie einen Fehler platzieren. Natürlich würden wir es nicht wissen, weil Sie uns keinen Code gezeigt haben.

3
Michael Rader

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

Fügen Sie Ihren Code zwischen dieses div ein, wenn 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>
2
Uzair Ahmad