La propriété CSS text-align

La propriété CSS text-align définit l'alignement horizontal du contenu inline à l'intérieur d'un conteneur de type bloc. En termes simples, elle contrôle la façon dont le texte (et les éléments inline tels que <a>, <img> ou <span>) se positionne dans sa boîte parente : aligné à gauche, à droite, centré ou étiré pour remplir la ligne.

Cette page couvre la syntaxe, chaque valeur avec ce qu'elle fait concrètement, des exemples interactifs, les pièges courants, ainsi que la différence entre text-align et le centrage d'un bloc lui-même.

Pourquoi text-align ne centre pas une boîte

Une source fréquente de confusion : text-align: center centre le contenu à l'intérieur d'un bloc, pas le bloc dans son parent. La propriété aligne le contenu de niveau inline par rapport au bloc qui le contient — elle ne déplace pas le bloc lui-même par rapport à son élément conteneur ou au viewport.

Pour centrer horizontalement un élément de type bloc (par exemple un <div> de largeur fixe), il faut lui donner une largeur et utiliser des marges horizontales automatiques — voir la propriété margin. Utilisez text-align pour positionner le texte à l'intérieur d'un élément ; utilisez margin: 0 auto pour positionner l'élément lui-même.

Info

L'alignement spécifié avec text-align ne se rapporte pas au bloc conteneur ou au viewport — il positionne le contenu inline à l'intérieur de son propre bloc.

Valeur initiale	left si la direction est "ltr", right si la direction est "rtl"
S'applique à	Conteneurs de type bloc.
Héritage	Oui
Animable	Non.
Version	CSS1
Syntaxe DOM	object.style.textAlign = "right";

Syntaxe

Syntaxe de la propriété CSS text-align

text-align: left | right | center | justify | initial | inherit;

Exemple de la propriété text-align avec les valeurs "right" et "center" :

Exemple de la propriété CSS text-align avec les valeurs right et center

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-align: right;
      }
      p {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Text-align property example</h2>
    <div>Example for the text-align property.</div>
    <p>Some paragraph for example.</p>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de la propriété text-align avec les valeurs "center", "left" et "justify" :

Exemple de la propriété CSS text-align avec les valeurs left, center et justify

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        text-align: center;
      }
      p.date {
        text-align: left;
      }
      p.example {
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <h2>Text-align property example</h2>
    <p class="date">March, 2019</p>
    <p class="example">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </body>
</html>

Essayez vous-même »

Avec justify, chaque ligne sauf la dernière est étirée de sorte que ses bords gauche et droit s'alignent avec les bords de la boîte ; le navigateur ajoute de l'espace supplémentaire entre les mots pour y parvenir. C'est pourquoi justify s'utilise de préférence sur des paragraphes larges et multiligne, et peut créer des espaces disgracieux sur des colonnes étroites.

Valeurs

La propriété text-align accepte les valeurs suivantes :

Valeur	Description	Essayer
left	Aligne le texte à gauche. C'est la valeur par défaut de cette propriété.	Essayer »
right	Aligne le texte à droite.	Essayer »
center	Aligne le texte au centre.	Essayer »
justify	Étend les lignes de façon à ce que chaque ligne ait la même largeur.	Essayer »
initial	Applique la valeur par défaut de la propriété.	Essayer »
inherit	Hérite la propriété de son élément parent.

Remarques et pièges courants

Elle n'affecte que le contenu inline. text-align n'a aucun effet sur un enfant de type bloc qui n'est pas inline. Pour positionner horizontalement un bloc, donnez-lui une largeur et utilisez margin: 0 auto, ou utilisez un layout flex/grid.
Elle est héritée. Étant donné que la propriété est héritée, définir text-align: center sur <body> se propage à tous les descendants jusqu'à ce que quelque chose le remplace. Définissez-la sur l'élément le plus spécifique possible pour éviter les surprises.
Elle respecte la direction d'écriture. La valeur initiale dépend de direction : left pour le texte de gauche à droite (ltr) et right pour le texte de droite à gauche (rtl). Les valeurs logiques start et end correspondent au bord de début/fin de la ligne quelle que soit la direction.
Centrer des images. Comme <img> est un élément inline, text-align: center sur son bloc parent centrera également l'image — pratique pour centrer rapidement une image sans Flexbox.
justify et la dernière ligne. justify n'étire jamais la dernière ligne d'un paragraphe ; cette ligne conserve l'alignement de début naturel. Contrôlez-la séparément avec text-align-last.

Propriétés associées

text-align-last — aligne la dernière ligne d'un bloc justifié.
text-indent — indente la première ligne du texte.
text-justify — affine la façon dont justify distribue l'espace.
direction — définit la direction du texte, qui détermine l'alignement par défaut.
vertical-align — aligne le contenu inline verticalement (l'axe perpendiculaire).

Entraînement

Pratique

Lesquelles des valeurs suivantes sont valides pour la propriété 'text-align' en CSS ?