Comment centrer un élément enfant au sein d'un parent `` à l'aide de CSS ?-tutoriel CSS-php.cn

How to Center a Child Element Within a Parent `` Using 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;
}

Copier après la connexion

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!

Article précédent：Comment puis-je changer la couleur d'arrière-plan de ma barre de navigation lors du défilement ? Article suivant：Pourquoi les éléments d'entrée au niveau bloc ne remplissent-ils pas toujours leurs conteneurs comme des div ?

Déclaration de ce site Web

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

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2836

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2959

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

2479

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...