Maison > Article > interface Web > Pourquoi Margin : Auto ne centre-t-il pas toujours les éléments positionnés ?
Margin:auto pas suffisant pour centrer les éléments positionnés
Lorsque vous essayez de centrer horizontalement un élément positionné de manière absolue ou fixe, la propriété margin:auto seul peut ne pas suffire.
Pour les éléments in-flow (éléments sans position : absolue ou fixe), définir uniquement la largeur est suffisant. Marge : auto équilibrera automatiquement les marges gauche et droite pour centrer l'élément.
Cependant, pour les éléments positionnés, la situation est différente. Conformément à la spécification CSS :
Pour centrer un élément positionné :
1. Définir la gauche, la droite et la largeur
position: absolute; left: 0; right: 0; width: 70px;
2. Définissez margin-left et margin-right sur auto (facultatif)
position: absolute; left: 0; right: 0; width: 70px; margin-left: auto; margin-right: auto;
Régler gauche et droite sur 0 définit essentiellement les limites gauche et droite à l'intérieur desquelles l'élément peut se déplacer. Marge : auto équilibre ensuite l'espace entre ces limites.
Exemple :
Considérons un élément parent d'une largeur de 200 px et un élément enfant positionné de manière absolue d'une largeur de 70px :
parent { width: 200px; position: relative; } child { position: absolute; left: 0; right: 0; width: 70px; margin: auto; /* Optional */ }
Lorsque margin: auto est utilisé, l'élément enfant est centré horizontalement par rapport au parent. En effet, les marges calculées (marge gauche et marge droite) sont égales, ce qui positionne effectivement l'enfant au milieu de l'espace disponible.
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!