Docs HTML exécutables : Centrer du texte

Q: Comment centrer du texte en HTML ?

Ajoutez text-align: center à l'élément qui contient le texte, par exemple ou une règle CSS comme h1 { text-align: center; }. Cela centre chaque ligne de texte et le contenu inline de cet élément.

Q: Comment centrer un texte verticalement ?

Faites du conteneur une boîte flex : display: flex; align-items: center; (ajoutez justify-content: center pour centrer aussi horizontalement). Pour une seule ligne dans une boîte de hauteur fixe, une line-height égale à la hauteur marche aussi.

Q: La balise est-elle encore valide ?

Non. et l'attribut align="center" sont obsolètes. Les navigateurs les affichent encore pour les anciennes pages, mais le nouveau code doit utiliser text-align: center en CSS.

Q: Comment faire un retrait de texte en HTML ?

Utilisez le CSS. text-indent: 2em met un retrait à la première ligne d'un paragraphe, et padding-inline-start: 2em ou margin-inline-start: 2em décale tout le bloc. Des espaces ou des dans le texte ne font pas un retrait fiable.

Comment centrer du texte en HTML

Utilisez la propriété CSS text-align: center sur l'élément qui contient le texte :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center text</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { text-align: center; }
    .center { text-align: center; }
  </style>
</head>
<body>
  <h1>A centered heading</h1>
  <p class="center">This paragraph is centered with a class.</p>
  <p style="text-align: center">This one uses an inline style.</p>
  <p>This paragraph is not centered.</p>
</body>
</html>

text-align centre chaque ligne de l'élément, y compris le contenu inline comme les liens, les images et les boutons. Elle est héritée : la définir sur un conteneur centre le texte de tout ce qu'il contient.

Sur le bloc, pas sur le span

text-align fonctionne sur les conteneurs de type bloc : <p>, <div>, titres, cellules de tableau. Sur un <span> ou un <a>, elle ne fait rien, car un élément inline n'est pas plus large que son texte et il n'y a pas d'espace pour centrer :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-align on inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #e5e7eb; margin-bottom: 8px; padding: 4px; }
    .on-span span { text-align: center; background: #fef3c7; }
    .on-div { text-align: center; border-color: #16a34a; }
    .on-div span { background: #dcfce7; }
  </style>
</head>
<body>
  <div class="on-span"><span>text-align on the span: no effect</span></div>
  <div class="on-div"><span>text-align on the parent div: centered</span></div>
</body>
</html>

La solution est toujours la même : déplacez text-align: center sur le bloc parent.

Centrer le bloc, aligner les lignes à gauche

Pour un paragraphe de plusieurs lignes, un texte entièrement centré est difficile à lire, car chaque ligne commence à un endroit différent. Une pratique courante consiste à centrer le bloc dans la page et à garder son texte aligné au début :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Centered column</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .column { max-width: 320px; margin-inline: auto; border: 2px dashed #2563eb; padding: 8px; }
    .column h2 { text-align: center; margin-top: 0; }
  </style>
</head>
<body>
  <div class="column">
    <h2>Centered title</h2>
    <p>This column sits in the middle of the page, but its lines of text start at the same edge, which keeps longer text easy to read.</p>
  </div>
</body>
</html>

margin-inline: auto centre un bloc qui a une largeur, text-align centre les lignes à l'intérieur. Le centrage de boîtes (avec flexbox, grid ou les marges) est présenté sur la page centrer une div.

Centrer un texte verticalement

text-align ne fonctionne qu'à l'horizontale. Pour centrer un texte verticalement dans une boîte, faites de la boîte un conteneur flex :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical center</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { height: 140px; background: #e5e7eb; border-radius: 8px; margin-bottom: 12px; }
    .flex { display: flex; align-items: center; justify-content: center; text-align: center; }
    .single { height: 60px; line-height: 60px; text-align: center; background: #dbeafe; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="box flex">Centered both ways<br>with flexbox</div>
  <div class="single">One line with line-height</div>
</body>
</html>

align-items: center centre verticalement, justify-content: center centre horizontalement, et text-align: center centre toujours les lignes les unes par rapport aux autres quand il y en a plusieurs. L'astuce de line-height ne marche que pour une seule ligne de texte dans une boîte de hauteur connue.

Toutes les valeurs de text-align

Valeur	Résultat
`start` (par défaut)	Les lignes commencent au bord de début : à gauche en français, à droite en arabe et en hébreu
`end`	Les lignes finissent au bord de fin
`center`	Lignes centrées
`justify`	Lignes étirées jusqu'aux deux bords (sauf la dernière)
`left`, `right`	Toujours à gauche ou toujours à droite, quelle que soit la langue

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-align values</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { width: 260px; border: 2px solid #e5e7eb; padding: 4px; }
  </style>
</head>
<body>
  <p style="text-align: start">start: the default for most text.</p>
  <p style="text-align: end">end: lines hug the end edge.</p>
  <p style="text-align: justify">justify: the spaces between words stretch so every full line reaches both edges of the box.</p>
  <p dir="rtl" style="text-align: start">start in a right to left paragraph</p>
</body>
</html>

Préférez start et end à left et right : elles s'inversent automatiquement pour les langues de droite à gauche, comme le montre la dernière boîte.

L'ancienne balise center

Les anciennes pages centrent le texte avec <center> ou avec un attribut align :

<center>Old way</center>
<p align="center">Also old</p>

Les deux sont obsolètes. Les navigateurs les affichent encore pour ne pas casser les vieux sites, mais ils sont invalides en HTML actuel et mélangent la mise en page au balisage. Utilisez text-align: center en CSS.

Faire un retrait de texte

HTML n'a pas de balise de retrait, et les espaces tapées sont réduites (voir espace en HTML). Les retraits relèvent du CSS :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Indent</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 420px; }
    .first-line { text-indent: 2em; }
    .block { padding-inline-start: 2em; border-inline-start: 3px solid #2563eb; }
    .hanging { padding-inline-start: 2em; text-indent: -2em; }
  </style>
</head>
<body>
  <p class="first-line">text-indent moves only the first line of the paragraph, the way books start a new paragraph. The following lines start at the edge.</p>
  <p class="block">padding-inline-start indents every line of the block.</p>
  <p class="hanging">A hanging indent: the first line sticks out and the rest is indented, as in a bibliography entry.</p>
</body>
</html>

Retrait	CSS
Première ligne seulement (alinéa)	`text-indent: 2em`
Tout le bloc	`padding-inline-start: 2em` ou `margin-inline-start: 2em`
Retrait négatif (première ligne en saillie)	`padding-inline-start: 2em; text-indent: -2em`

em lie le retrait à la taille de police, il suit donc la taille du texte.

Erreurs fréquentes

text-align sur un élément inline. Mettez-la sur le bloc parent.
S'attendre à ce que text-align centre une boîte. Elle centre le texte et le contenu inline, pas un bloc qui a une largeur. Utilisez margin-inline: auto ou flexbox pour les boîtes.
Utiliser <center> ou align="center". Obsolète. Utilisez le CSS.
Centrer de longs paragraphes. Centrez les titres et les lignes courtes ; gardez le texte courant aligné au début.
Faire un retrait avec   ou des espaces. Utilisez text-indent ou du padding.

Questions fréquentes

Comment centrer du texte en HTML ?

Ajoutez text-align: center à l'élément qui contient le texte, par exemple <p style="text-align: center"> ou une règle CSS comme h1 { text-align: center; }. Cela centre chaque ligne de texte et le contenu inline de cet élément.

Pourquoi text-align: center ne marche pas sur mon span ?

Un span est inline : il n'est pas plus large que son texte et il n'y a pas de place pour centrer. Mettez text-align: center sur le bloc parent (le <p> ou la <div> qui l'entoure), ou passez le span en display: block.

Comment centrer un texte verticalement ?

Faites du conteneur une boîte flex : display: flex; align-items: center; (ajoutez justify-content: center pour centrer aussi horizontalement). Pour une seule ligne dans une boîte de hauteur fixe, une line-height égale à la hauteur marche aussi.

La balise <center> est-elle encore valide ?

Non. <center> et l'attribut align="center" sont obsolètes. Les navigateurs les affichent encore pour les anciennes pages, mais le nouveau code doit utiliser text-align: center en CSS.

Comment faire un retrait de texte en HTML ?

Utilisez le CSS. text-indent: 2em met un retrait à la première ligne d'un paragraphe, et padding-inline-start: 2em ou margin-inline-start: 2em décale tout le bloc. Des espaces ou des   dans le texte ne font pas un retrait fiable.

Concepts liés