web-dev-qa-db-fra.com

Comment centrer un SVG dans une div?

J'ai un SVG que j'essaye de centrer dans une div. La div a une largeur ou 900px. Le SVG a une largeur de 400px. 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 de gauche était 0 (valeur par défaut).

Quelqu'un sait mon erreur?

csslayoutsvgpositioningmargin
215
Don P

SVG est inline par défaut. Ajoutez-y display: block puis margin: auto fonctionnera comme prévu.

396
Spadar Shut

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

24
Esger

Après avoir lu plus haut que svg est inline par défaut, je viens d’ajouter ce qui suit au div:

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

et ça a fait l'affaire pour moi.

Les puristes n’apprécient peut-être pas cela (c’est une image, pas du texte), mais à mon avis, HTML et CSS ont été gâchés par le centrage, je pense donc que c’est justifié.

23
David

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

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

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

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

  1. viewBox: définit la zone rectangulaire à couvrir par svg.
  2. preserveAspectRatio: défini où placer le viewport de viewBox et comment l'étirer si le viewport change.

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

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

Je devais utiliser

display: inline-block;
4
Joanna Schweiger

assurez-vous que votre css se lit comme suit:

margin: 0 auto;

Même si vous dites que la gauche et la droite sont réglées sur auto, il se peut que vous placiez une erreur. Bien sûr, nous ne le saurions pas car vous ne nous avez montré aucun code.

3
Michael Rader

Vous pouvez aussi faire ceci:

<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
Martin Lloyd Jose

Mettez votre code entre div si vous utilisez 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
Uzair Ahmad