Comment centrer un élément dans sa division parent à l'aide de CSS ?-tutoriel CSS-php.cn

How to Center an Element Within Its Parent Div Using CSS?

Centrage d'un élément dans un parent

Lorsque vous centrez un élément HTML en utilisant left: 50%;, il aligne l'élément avec toute la fenêtre du navigateur. Cependant, pour centrer un élément spécifiquement dans son parent

élément, une approche différente est nécessaire.

Pour y parvenir, attribuez text-align:center; au parent

. Cela centrera tout le contenu dans le

, y compris l'élément enfant.

Ensuite, ajoutez margin:auto; à l'élément enfant. Cela garantit que l'élément enfant est automatiquement ajusté au sein de l'élément parent

, quelle que soit sa largeur ou sa hauteur.

Voici une démonstration utilisant CSS :

#parent {
    text-align:center;
    background-color:blue;
    height:400px;
    width:600px;
}
.block {
    height:100px;
    width:200px;
    text-align:left;
}
.center {
    margin:auto;
    background-color:green;
}

Copier après la connexion

Remarquez que margin:auto ; centre l'élément enfant à la fois horizontalement et verticalement au sein du parent

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：L'attribut `type` du `` Tag '' est-il vraiment nécessaire ? Article suivant：Pourquoi mes boutons collants ne fonctionnent-ils pas dans IE 11 ?

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

2639

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

2764

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

2340

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