Comment centrer un SVG dans un Div : Pourquoi Margin : Auto ne fonctionne pas et comment y remédier ?

Comment aligner parfaitement un SVG dans un Div

Lors de l'ajout d'un SVG (Scalable Vector Graphic) à un div, il est essentiel d'aligner avec précision pour obtenir la disposition souhaitée. Voici une question et une solution courantes concernant ce sujet :

Question :

J'essaie de centrer un SVG dans un div, mais cela ne fonctionne pas correctement. Le div a une largeur de 900 px et le SVG a une largeur de 400 px. J'ai défini les marges gauche et droite du SVG sur auto, mais le système agit comme si la marge gauche était de 0. Quel pourrait être le problème ?

Réponse :

En CSS, les SVG sont des éléments en ligne par défaut, ce qui signifie qu'ils se comportent comme du texte. En tant que tels, ils ne répondent pas aux paramètres de marge comme le font les éléments de bloc. Pour remédier à cela, vous devez ajouter display: block au SVG pour en faire un élément de bloc. Cela permettra à margin: auto de fonctionner comme prévu, en centrant le SVG dans le div.

Alternativement, en fonction de votre mise en page, vous pouvez garder le SVG en ligne et définir text-align: center sur l'élément parent. Cela alignera tous les éléments en ligne, y compris le SVG, au centre du parent.

Une autre option consiste à exploiter les dispositions flexbox ou grille sur l'élément parent et à utiliser les propriétés de centrage pour aligner le SVG à l'intérieur de celui-ci. Cette approche offre plus de flexibilité dans le contrôle de la mise en page et peut être utile dans divers scénarios.

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!