Comment centrer un SVG dans une div?

254

J'ai un SVG que j'essaye de centrer dans un div. Le div a une largeur ou 900px. Le SVG a une largeur de 400 pixels. Le SVG a sa marge gauche et sa marge droite réglées sur auto. Ne fonctionne pas, il agit simplement comme si la marge gauche est 0 (par défaut).

Quelqu'un connaît mon erreur?

css layout svg positioning margin Don P
la source

Réponses:

461

SVG est en ligne par défaut. Ajoutez- display: blocky et puis margin: autofonctionnera comme prévu.

Spadar Shut
la source
10
à peu près sûr que cela signifie également que l'alignement du texte: le centre sur l'élément parent fonctionnera également (cela fonctionne pour moi dans Chrome de toute façon)
Nathan
cela n'a PAS fonctionné pour moi, mais en utilisant 'inline-block' au lieu de 'block', cela a fonctionné. C'est peut-être parce que j'ai inséré le SVG dans un td, pas undiv
mathheadinclouds
29

Les réponses ci-dessus n'ont pas fonctionné pour moi. L'ajout de l'attribut preserveAspectRatio="xMidYMin"à la <svg>balise a cependant fait l'affaire. L' viewBoxattribut doit être spécifié pour que cela fonctionne également. Source: réseau de développeurs Mozilla

Esger
la source
7
Mon approche actuelle est la flexbox. Ajoutez simplement: .container { display: flex; justify-content: center; }Et ajoutez la classe .container à la div qui contient votre svg.
Esger
1
Pensez à ajouter une autre réponse avec cette nouvelle approche afin que je puisse la voter. Merci de votre aide!
Chris Peters
25

Après avoir lu ci-dessus que svg est en ligne par défaut, je viens d'ajouter ce qui suit à la div:

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

et ça a fait l'affaire pour moi.

Les puristes peuvent ne pas l'aimer (c'est une image, pas du texte) mais à mon avis HTML et CSS ont foiré le centrage, donc je pense que c'est justifié.

David
la source
Merci pour cela. simple et efficace. devenu fou pendant des heures à jouer avec viewPort et viewBox. cela a fait l'affaire en quelques secondes. il suffit d'envelopper la chose stupide dans un div et de le centrer.
anon58192932
@ anon58192932 - Vous êtes les bienvenus. C'est stupidement simple, mais satisfaisant qu'il soit utile aux autres, car j'ai bénéficié de nombreuses réponses plus sophistiquées aux questions ici.
David
20

Aucune de ces réponses n'a fonctionné pour moi. Voilà comment je l'ai fait.

position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
Ryan
la source
3
je ne sais pas pourquoi, mais j'ai dû utiliserleft: 100%
Luís Deschamps Rudge
16

Les réponses ci-dessus semblent incomplètes car elles ne parlent que du point de vue CSS.

le positionnement du svg dans la fenêtre est affecté par deux attributs svg

  1. viewBox: définit la zone rectangulaire pour le svg à couvrir.
  2. preserveAspectRatio: a défini où placer la fenêtre d'affichage de la viewBox et comment l'étirer si la fenêtre change.

Suivez ce lien de codepen pour une description détaillée

<svg viewBox="70 160 800 190" preserveAspectRatio="xMaxYMax meet">
Shishir Arora
la source
6

Je devais utiliser

display: inline-block;
Joanna Schweiger
la source
4

assurez-vous que votre css lit:

margin: 0 auto;

Même si vous dites que la gauche et la droite sont définies sur auto, vous pouvez placer une erreur. Bien sûr, nous ne le saurions pas car vous ne nous avez montré aucun code.

Michael Rader
la source
3

Vous pouvez également le faire:

<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>
Martin Lloyd Jose
la source
2

Mettez votre code entre ceci divsi vous utilisez le bootstrap :

  <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>
Uzair Ahmad
la source
2

Flexbox est une autre approche: ajouter .container { display: flex; justify-content: center; }et ajouter la .containerclasse à la div qui contient votre svg.

Esger
la source
0

Pour moi, le correctif consistait à ajouter margin: 0 auto;sur l'élément contenant le<svg> .

Comme ça:

<div style="margin: 0 auto">
   <svg ...</svg>
</div>
Collin Krawll
la source