Pourquoi ma propriété CSS « gauche » ne centre-t-elle pas mon élément ?

La propriété CSS "left" ne fonctionne pas

Lorsque vous essayez d'aligner un élément au centre d'un élément parent à l'aide de la propriété "left" , vous pouvez rencontrer une erreur si l'élément n'est pas positionné correctement.

Considérez un scénario avec deux divs, l'un imbriqué dans l'autre. Pour centrer la bordure gauche du div interne dans le div parent, vous utiliserez généralement le CSS suivant :

#inner {
   width: 400px;
   height: 300px;
   background-color: #090;
   left: 50%;
}

Cependant, ce code peut ne pas fonctionner si le div interne n'a pas de position définie. Par défaut, les éléments ont une position « statique », ce qui ne permet pas un positionnement absolu.

Pour résoudre ce problème, vous devez définir la position du div interne sur « absolue » ou « relative ». Cela vous permet d'utiliser la propriété "left" pour positionner l'élément dans le div parent.

#inner {
   width: 400px;
   height: 300px;
   background-color: #090;
   position: absolute;  // Or position: relative;
   left: 50%;
}

En définissant la position sur "absolu", le div interne est détaché du flux normal du document et peut être positionné en utilisant des coordonnées absolues. La propriété "left" est désormais interprétée comme un décalage horizontal par rapport au bord gauche du div parent, centrant ainsi le div interne à l'intérieur.

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!