Pourquoi mon attribut CSS « gauche » ne centre-t-il pas mon élément ?

L'attribut CSS "left" ne fonctionne pas

En CSS, la propriété "left" est utilisée pour contrôler la position horizontale d'un élément par rapport à son élément contenant. Cependant, il est essentiel de s'assurer que l'élément conteneur a une largeur, une hauteur et une position définies pour que la propriété "left" fonctionne correctement.

En vous référant à l'exemple de code fourni, vous essayez de positionner un enfant div (« intérieur ») dans un div parent (« extérieur ») de telle sorte que son bord gauche s'aligne avec le centre du div parent en utilisant « gauche : 50 % ». Cependant, le code que vous avez fourni n'aligne pas correctement le div enfant.

Le correctif :

Pour positionner correctement le div enfant, vous devez spécifier une position autre que "statique" pour le div contenant ("outher"). En effet, la position « statique » est la valeur par défaut des éléments en HTML et ne permet pas un positionnement précis.

Code ajusté :

#outher {
   width: 1000px;
   height: 1000px;
   background-color: #ccc;
   position: relative; // Add this line
}

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

Par paramètre la propriété "position" à "absolue" pour le div enfant et "relative" pour le div contenant, vous établissez un point de référence approprié pour la propriété "gauche". Cela garantit que le div enfant est positionné par rapport au div conteneur et que son bord gauche s'aligne avec le centre du div parent comme prévu.

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!