Comment centrer un élément enfant à l'intérieur de son `` parent ?-tutoriel CSS-php.cn

Comment centrer un élément enfant à l'intérieur de son `` parent ?

Barbara Streisand

Libérer： 2024-11-30 04:39:17

original

552 Les gens l'ont consulté

How Do I Center a Child Element Inside Its Parent ``?

Centrer un élément dans un

Élément

Lors de l'utilisation de la propriété CSS left : 50 %, l'élément est centré par rapport à l'ensemble de la fenêtre d'affichage, et non à l'élément parent immédiat. Pour centrer un élément enfant dans son parent, utilisez une combinaison de text-align et margin.

Définissez la propriété text-align de l'élément parent sur center pour centrer son contenu horizontalement. Ensuite, appliquez margin: auto; à l'élément enfant. Cela ajustera automatiquement les marges de tous les côtés, garantissant que l'élément est centré dans le parent.

Exemple :

#parent {
    text-align: center;
}

.child {
    margin: auto;
}

Copier après la connexion

Dans cet exemple, le #parent div sera centré horizontalement dans la fenêtre et le div .child sera centré horizontalement dans le #parent div.

Remarques supplémentaires :

Utilisation de la marge : auto ; ne centrera l'élément qu'horizontalement. Si vous souhaitez le centrer à la fois horizontalement et verticalement, vous devez définir margin: auto auto;.
Si l'élément enfant a une largeur plus large que l'élément parent, il s'étendra au-delà des limites du parent. Dans ce cas, il est préférable de définir la propriété width de l'élément enfant sur une valeur plus petite qui correspond à celle 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!