recherche

Maison >interface Web >tutoriel CSS >Comment centrer un élément dans sa division parent à l'aide de CSS ?

Comment centrer un élément dans sa division parent à l'aide de CSS ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-25 03:06:12983parcourir

How to Center an Element Within Its Parent Div Using CSS?

Centrage d'un élément dans un parent

Lorsque vous centrez un élément HTML en utilisant left: 50%;, il aligne l'élément avec toute la fenêtre du navigateur. Cependant, pour centrer un élément spécifiquement dans son parent

élément, une approche différente est nécessaire.

Pour y parvenir, attribuez text-align:center; au parent

. Cela centrera tout le contenu dans le
, y compris l'élément enfant.

Ensuite, ajoutez margin:auto; à l'élément enfant. Cela garantit que l'élément enfant est automatiquement ajusté au sein de l'élément parent

, quelle que soit sa largeur ou sa hauteur.

Voici une démonstration utilisant CSS :

#parent {
    text-align:center;
    background-color:blue;
    height:400px;
    width:600px;
}
.block {
    height:100px;
    width:200px;
    text-align:left;
}
.center {
    margin:auto;
    background-color:green;
}

Remarquez que margin:auto ; centre l'élément enfant à la fois horizontalement et verticalement au sein du parent

.

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!

css html auto using this margin
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
Article précédent：L'attribut `type` du `` Tag '' est-il vraiment nécessaire ?Article suivant：L'attribut `type` du `` Tag '' est-il vraiment nécessaire ?

Articles Liés

Voir plus