Comment centrer un SVG dans un Div lorsque les largeurs diffèrent ?

Alignement d'un SVG dans un Div

Centrer un SVG dans un div peut poser un défi, en particulier lorsque le div et le SVG ont des largeurs différentes. Examinons le problème présenté dans la question et explorons les solutions potentielles.

Énoncé du problème

L'utilisateur tente de centrer un SVG dans un div en utilisant margin-left: auto et margin-right: auto. Cependant, le SVG reste aligné à gauche comme si margin-left était défini sur 0.

Solution

Le problème se pose car, par défaut, un SVG est un contenu en ligne. Pour le rendre au niveau du bloc, vous devez spécifier explicitement display: block. Une fois que vous faites cela, margin: auto fonctionnera comme prévu et centrera le SVG dans le div.

<code class="CSS">svg {
  display: block;
  margin: auto;
}</code>

Approches alternatives

1. Alignement du texte : Au lieu de modifier l'affichage du SVG, vous pouvez l'aligner dans l'élément parent en utilisant text-align: center. Cette approche maintient le SVG en ligne mais le centre dans le parent.
2. Mises en page Flex/Grid : Les mises en page Flex ou grille offrent une autre alternative. En définissant l'élément parent comme conteneur flex ou grille, vous pouvez utiliser la propriété align-items ou justifier-items pour centrer le SVG.

Pour résumer, assurez-vous que le SVG est affiché sous forme de bloc. l'élément level (display: block) vous permet d'utiliser margin: auto pour le centrage. Alternativement, les dispositions text-align: center ou flex/grid peuvent également aligner efficacement le SVG dans son élément parent.

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!