Comment centrer verticalement un élément enfant à l'intérieur d'une div ?

Centrer l'élément verticalement dans un <div> Élément

Lors de l'alignement d'éléments dans une page Web, il est crucial de comprendre la différence entre l'alignement des éléments par rapport à la fenêtre ou par rapport à leur conteneur parent. Lors de l'utilisation à gauche : 50 % ; centre un élément dans toute la fenêtre, en alignant un élément sur son parent direct <div> nécessite une approche différente.

Pour obtenir un centrage vertical dans un <div>, suivez ces étapes :

1. Ajoutez text-align:center; au parent <div>. Cela garantit que tous ses éléments enfants sont alignés horizontalement par rapport au centre.
2. Pour que l'élément enfant soit centré verticalement, appliquez margin:auto;. Cela demande au navigateur d'ajuster automatiquement les marges supérieure et inférieure de l'élément pour répartir uniformément l'espace restant.

Un exemple de code HTML et CSS qui démontre ceci :

<div>

#parent {
  text-align: center;
}

#child {
  margin: auto;
}

Dans cet exemple, l'élément enfant est centré à la fois horizontalement et verticalement au sein de l'élément 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!