Comment centrer un SVG dans un conteneur Div à l'aide de CSS ?

Centrage des SVG dans des conteneurs Div à l'aide de CSS

Lorsque vous essayez de centrer un SVG dans un div, vous pouvez rencontrer des difficultés si le div et le SVG ont des largeurs variables, malgré la définition des marges sur « auto ».

Comprendre le problème :

Les SVG sont rendus par défaut sous forme d'éléments en ligne. Cela signifie qu'ils se comportent comme du texte, donc la définition de "margin: auto" n'affecte que les marges gauche et droite. Dans votre cas, la marge gauche par défaut de zéro reste inchangée, ce qui entraîne un décalage par rapport au centre.

Solutions :

1. Définir l'affichage : Block :

Convertissez le SVG en élément de bloc en ajoutant "display: block" à son CSS. Cela permettra à "margin: auto" de centrer le SVG horizontalement dans le div.

Exemple :

svg {
  display: block;
  margin: auto;
}

2. Utiliser Text-Align : Center :

Conservez le SVG en tant qu'élément en ligne et définissez "text-align: center" sur le div parent. Cela alignera tous les éléments en ligne, y compris le SVG, au centre du div.

Exemple :

div {
  text-align: center;
}

svg {
  margin: 0 auto;
}

3. Dispositions flexibles ou en grille :

Vous pouvez également utiliser des dispositions flexibles ou en grille pour centrer le SVG dans l'élément parent :

Flexbox :

.container {
  display: flex;
  justify-content: center;
}

svg {
  margin: auto;
}

Grille :

.container {
  display: grid;
  justify-content: center;
}

svg {
  grid-column: 1;
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!