Maison >interface Web >tutoriel CSS >Comment centrer un élément enfant au sein d'un parent `` à l'aide de CSS ?
Comment centrer un élément enfant au sein d'un parent `` à l'aide de CSS ?
- Susan Sarandonoriginal
- 2024-11-30 11:45:16719parcourir
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!
Déclaration：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.cnArticle précédent：Comment puis-je changer la couleur d'arrière-plan de ma barre de navigation lors du défilement ?Article suivant：Comment puis-je changer la couleur d'arrière-plan de ma barre de navigation lors du défilement ?Articles Liés
Voir plus- Analyse détaillée de l'utilisation du chapiteau
- Une brève discussion sur les avantages et les inconvénients de DIV+CSS
- Trois façons de prendre des captures d'écran avec CSS
- Utilisez CSS pour implémenter l'affichage d'un espace réservé lorsque l'image n'est pas chargée. Exemple de partage.
- Navigation sur le site Web de conception CSS+Html
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
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 Définir l'alignement du texte : centre ; au parent Étape 2 : Centrer l'enfant spécifique à l'aide de la marge Une fois que le parent Pour plus de clarté, voici un exemple : 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!#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;
}Articles Liés
Voir plus