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?

Réponses:


461

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


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


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


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

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


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.


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>

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>

2

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


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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.