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

Centrage d'un élément dans un parent <div>

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 <div> élément, une approche différente est nécessaire.

Pour y parvenir, attribuez text-align:center; au parent <div>. Cela centrera tout le contenu dans le <div>, 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 <div>, 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 <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!