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!

source：php.cn

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

2248

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

2387

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

1997

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...