Comment CSS « margin : auto » centre-t-il les éléments ?

La magie de « Auto » dans les marges CSS

Il est de notoriété publique que les marges CSS déterminent l'espace autour d'un élément. Mais que se passe-t-il si nous utilisons « auto » comme valeur ?

Comprendre le rôle de « Auto »

Lorsqu'il est appliqué au deuxième paramètre de la marge, « auto » donne le pouvoir au navigateur la responsabilité de déterminer lui-même les marges gauche et droite. Il y parvient en définissant les deux marges de manière égale.

Exemple : Centrer des objets

Considérons un scénario dans lequel nous avons un conteneur parent d'une largeur de 100 px et un élément enfant. avec une largeur de 50px. En utilisant « marge : 0 auto », le navigateur calcule l'espace restant (50 px) et le répartit également entre les marges gauche et droite.

Cela donne les calculs suivants :

freeSpace = 100 - 50 = 50
equalShare = freeSpace / 2 = 25

margin-left: 25
margin-right: 25

Par conséquent, l'élément enfant est centré dans le conteneur parent.

Supplémentaire Notes

• Il n'est pas nécessaire de spécifier la largeur de l'élément parent pour que « auto » fonctionne. Seule la largeur de l'objet enfant est requise.
• 'Auto' peut également être utilisé pour le premier paramètre de marge, indiquant que les marges supérieure et inférieure doivent être définies de manière égale.

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!