Parfois, vous avez besoin de centrer votre <div> horizontalement, mais vous ne savez pas comment faire. Cet article est pour vous. C'est très simple si vous suivez les étapes décrites ci-dessous.
Voyons un exemple et discutons de chaque partie du code.
HTML
- Placez les balises <h2> et <h3> et écrivez-y du contenu à votre convenance.
- Créez une balise <div> et ajoutez-y du contenu à votre convenance.
<body>
<h2>TutorialsGrey</h2>
<h3>Centrer horizontalement un div</h3>
<div>
TutorialsGrey est un site de Questions/Réponses sur l'informatique en général, et sur la programmation en particulier.
</div>
</body>
CSS
- Définissez la largeur du div à l'aide de la propriété width.
- Utilisez la propriété margin qui crée de l'espace autour de l'élément. Définissez sa valeur à "auto" pour centrer le <div>.
- Définissez la bordure du <div> à l'aide de la propriété border et définissez les valeurs des propriétés border-width, border-style et border-color.
- Choisissez des couleurs pour les balises <h2> et <h3> selon ce qui vous convient.
- Utilisez la propriété text-align avec sa valeur "center" pour les balises <h2> et <h3> pour aligner le texte au centre.
div {
width: 300px;
margin: auto;
border: 3px solid #4287f5;
}
h2,
h3 {
text-align: center;
color: #4287f5;
}
Voici le résultat de notre code.
Exemple de centrage horizontal d'un <div> :
<!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>
<style>
div {
width: 300px;
margin: auto;
border: 3px solid #0E1B93;
}
h2,
h3 {
text-align: center;
color: #0E1B93;
}
</style>
</head>
<body>
<h2>TutorialsGrey</h2>
<h3>Centrer horizontalement un div</h3>
<div>
TutorialsGrey est un site de Questions/Réponses sur l'informatique en général, et sur la programmation en particulier.
</div>
</body>
</html>
L'exécution de ce bout de code affiche le résultat suivant dans un navigateur :
Voyons un autre exemple.
Exemple de centrage horizontal d'un <div> avec la propriété CSS position :
<!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>
<style>
div {
background-color: #8ebf42;
color: #ffffff;
width: 300px;
height: 150px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 20px;
line-height: 30px;
}
h2,
h3 {
text-align: center;
color: #0E1B93;
}
</style>
</head>
<body>
<h2>TutorialsGrey</h2>
<h3>Centrer horizontalement un div</h3>
<div>
TutorialsGrey est un site de Questions/Réponses sur l'informatique en général, et sur la programmation en particulier.
</div>
</body>
</html>
L'exécution du bout de code ci-dessus affiche le résultat suivant dans un navigateur :
Dans l'exemple ci-dessus, nous utilisons la propriété position avec la valeur "absolute", ce qui signifie que les éléments sont supprimés du flux du document et sont positionnés par rapport à l'élément ancêtre positionné. Nous utilisons la propriété transform qui spécifie la transformation bidimensionnelle ou tridimensionnelle de l'élément.
De plus, nous utilisons les propriétés padding pour l'espace intérieur du <div> et line-height pour la hauteur des lignes de texte du <div>
Voyons un autre exemple.
Exemple de centrage horizontal d'un <div> avec la propriété CSS display :
<!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>
<style>
.purple-box {
display: flex;
align-items: center;
justify-content: center;
}
.purple-square {
background-color: #B10DC9;
width: 250px;
height: 250px;
}
h2,
h3 {
text-align: center;
color: #4287f5;
}
</style>
</head>
<body>
<h2>TutorialsGrey</h2>
<h3>Centrer horizontalement un div</h3>
<div class="purple-box">
<div class="purple-square"></div>
</div>
</body>
</html>
L'exécution du bout de code ci-dessus affiche le résultat suivant dans un navigateur :
Dans cet exemple, nous utilisons la propriété display avec la valeur "flex" pour afficher un élément en tant que conteneur flex au niveau du bloc. Nous utilisons également la propriété align-items avec la valeur "center" qui signifie que les éléments sont placés au centre du conteneur. Ensuite, nous ajoutons la propriété justify-content avec la valeur "center".