Comment centrer un élément enfant au sein d'un parent `` à l'aide de CSS ?

Centrage d'un élément dans un

Lorsque vous utilisez CSS pour centrer un élément avec left: 50%;, l'alignement est relatif à la fenêtre entière. Cependant, lors du centrage d'un élément au sein d'un

parent, nous souhaitons que l'alignement soit relatif à l'élément qui le contient.

Solution

Pour y parvenir, nous pouvons utiliser une combinaison de texte -aligner : centrer ; et marge : auto ; Propriétés CSS.

Étape 1 : Alignez le parent

Centre

Définir l'alignement du texte : centre ; au parent

élément. Cela centrera tous ses éléments enfants en son sein.

Étape 2 : Centrer l'enfant spécifique à l'aide de la marge

Une fois que le parent

est aligné, nous devons centrer l’élément enfant spécifique. Appliquer la marge : auto ; à l'élément enfant. Cela centrera automatiquement l'élément dans l'élément parent

, quelle que soit la largeur de l'élément enfant.

Pour plus de clarté, voici un exemple :

#parent {
  text-align: center;
  background-color: blue;
  height: 400px;
  width: 600px;
}

.child {
  height: 100px;
  width: 200px;
  text-align: left;
}

.center {
  margin: auto;
  background-color: green;
}

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!