Maison >interface Web >tutoriel CSS >Pourquoi mon attribut CSS « gauche » ne centre-t-il pas mon élément ?

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

Susan Sarandon
Susan Sarandonoriginal
2024-11-14 09:25:02463parcourir

Why Is My CSS

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn