Comment centrer un texte en HTML et CSS ?

Réponses rédigées par Antoine

Dernière mise à jour : 2021-09-01 10:50:11

Question

Comment faire pour centrer un texte dans une page HTML avec CSS ?

Réponse

Pour centrer un texte en HTML, il est préférable d'utiliser du code CSS.

La propriété CSS text-align et sa valeur center permet de centrer un texte dans son contenant de la manière suivante :

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Comment centrer un texte en HTML et CSS ?</title>
<style>
.100 {
  width:100%;
}
.centrer_texte {
  text-align:center;
}
</style>
</head>
<body>
<div class="centrer_texte 100">Un texte centré dans une balise DIV.</div>
</body>
</html>

Si vous désirez centrer un contenant dans une page, il vous faut utiliser les propriétés CSS width et margin de la manière suivante :

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Comment centrer un texte en HTML et CSS ?</title>
<style>
.centrer_contenant {
width: 50%; 
margin: auto;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="centrer_contenant">Un contenant centré dans la page.</div>
</body>
</html>

Vous trouverez une démo des différentes manières de centrer un texte en HTML et CSS via cette page du bac à codes.