Maison > interface Web > tutoriel CSS > Pourquoi ma propriété CSS 'gauche' ne centre-t-elle pas ma division enfant ?

Pourquoi ma propriété CSS 'gauche' ne centre-t-elle pas ma division enfant ?

Linda Hamilton
Libérer: 2024-11-11 22:43:02
original
561 Les gens l'ont consulté

Why Isn't My CSS

La propriété CSS "gauche" ne fonctionne pas ?

Lorsque vous essayez de centrer la bordure gauche d'un div enfant dans son div parent à l'aide de l'option " gauche : 50 %", l'effet souhaité peut ne pas être obtenu. Cela peut être attribué au positionnement par défaut des éléments HTML, qui est « statique ». Dans cet état par défaut, la propriété "left" n'a aucun effet.

Solution : positionnement absolu ou relatif

Pour activer la propriété "left" pour positionner le div enfant correctement, vous devez définir sa propriété de position sur « absolue » ou « relative ». Cela informe le navigateur que le div enfant doit être positionné par rapport à son élément conteneur plutôt qu'à l'ensemble du document.

CSS mis à jour :

#inner {
    width: 400px;
    height: 300px;
    background-color: #090;
    position: absolute;
    left: 50%;
}
Copier après la connexion

En définissant la position propriété à "absolu", le div enfant se positionne par rapport à son parent et la propriété "gauche" de 50 % positionne sa bordure gauche exactement à mi-chemin dans le parent div.

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 de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal