text-align - CSS : Feuilles de style en cascade

La propriété text-align définit l'alignement horizontal d'un élément de bloc ou de la boîte d'une cellule de tableau. Cette propriété fonctionne donc de façon analogue à vertical-align mais dans le sens horizontal.

Syntaxe

/* Valeurs avec un mot-clé */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/* Dans une cellule de tableau, caractère sur lequel */
/* doit être aligné le contenu de la cellule         */
text-align: ".";
text-align: "." center;

/* Alignement de bloc (non standard) */
text-align: -moz-center;
text-align: -webkit-center;

/* Valeurs globales */
text-align: inherit;
text-align: initial;
text-align: unset;

La propriété text-align peut être définie grâce à l'un des mots-clés de la liste qui suit.

Valeurs

start: Cette valeur a le même effet que la valeur left si la direction du texte va de gauche à droite ou le même effet que right si la direction du texte va de droite à gauche.
end: Cette valeur a le même effet que la valeur right si la direction du texte va de gauche à droite ou le même effet que left si la direction du texte va de droite à gauche.
left: Les contenus en ligne (inline) sont alignés sur le bord gauche de la boîte contenant la ligne.
right: Les contenus en ligne (inline) sont alignés sur le bord droit de la boîte contenant la ligne.
center: Les contenus en ligne (inline) sont horizontalement centrés par rapport à la boîte contenant la ligne.
justify: Le texte est justifié. Les bords gauche et droit du texte sont alignés avec les bord gauche et droit du paragraphe.
justify-all: Comportement analogue à justify mais avec la dernière ligne nécessairement justifiée.
match-parent: Semblable à inherit mais les valeurs start et end sont calculées selon la valeur de direction pour le parent et sont remplacées par left ou right selon ce qui est adéquat.
<string>: Lorsque cette valeur est appliquée sur une cellule de tableau, elle indique le caractère sur lequel doit être aligné le contenu de la cellule.

Syntaxe formelle

start | end | left | right | center | justify | match-parent

Exemples

Alignement à gauche

HTML

<p class="exemple">
  Il y avait en Vestphalie, dans le château de M. le baron de
  Thunder-ten-tronckh, un jeune garçon à qui la nature avait
  donné les moeurs les plus douces. Sa physionomie annonçait
  son âme. Il avait le jugement assez droit, avec l’esprit le plus
  simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
</p>

CSS

.exemple {
  text-align: left;
  border: solid;
}

Résultat

Texte centré

HTML

<p class="exemple">
  Il y avait en Vestphalie, dans le château de M. le baron de
  Thunder-ten-tronckh, un jeune garçon à qui la nature avait
  donné les moeurs les plus douces. Sa physionomie annonçait
  son âme. Il avait le jugement assez droit, avec l’esprit le plus
  simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
</p>

CSS

.exemple {
  text-align: center;
  border: solid;
}

Résultat

Justification

HTML

<p class="exemple">
  Il y avait en Vestphalie, dans le château de M. le baron de
  Thunder-ten-tronckh, un jeune garçon à qui la nature avait
  donné les moeurs les plus douces. Sa physionomie annonçait
  son âme. Il avait le jugement assez droit, avec l’esprit le plus
  simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
</p>

CSS

.exemple {
  text-align: justify;
  border: solid;
}

Résultat

Notes

La méthode la plus générique pour centrer un bloc plutot que de centrer son contenu est d'utiliser la propriété margin avec les valeurs left et right à auto, e.g. :

.classe {
  margin: auto;
}

.classe {
  margin: 0 auto;
}

.classe {
  margin-left: auto;
  margin-right: auto;
}

Accessibilité

L'espacement créé entre les mots par la justification du texte peut rendre la lecture difficile pour les personnes dyslexiques ou souffrant de troubles cognitifs.

Spécifications

Spécification	État	Commentaires
CSS Logical Properties and Values Level 1 La définition de 'text-align' dans cette spécification.	Brouillon de l'éditeur	Aucun changement
CSS Text Module Level 4 La définition de 'text-align' dans cette spécification.	Brouillon de l'éditeur	Ajout de la gestion des valeurs `<string>`.
CSS Text Module Level 3 La définition de 'text-align' dans cette spécification.	Candidat au statut de recommandation	Ajout des valeurs `start`, `end` et `match-parent`. La valeur initiale qui n'était pas nommée est bien définie avec `start`.
CSS Level 2 (Revision 1) La définition de 'text-align' dans cette spécification.	Recommendation	Aucun changement
CSS Level 1 La définition de 'text-align' dans cette spécification.	Recommendation	Définition initiale.

Valeur initiale	`start`, ou une valeur non nommée se comportant comme `left` si `direction` est `ltr`, `right` si `direction` est `rtl` si `start` n'est pas supporté par le navigateur
Applicabilité	conteneurs de type bloc
Héritée	oui
Valeur calculée	comme spécifié, sauf pour la valeur `match-parent` qui est calculée en fonction de la `direction` du parent et qui vaut soit `left`, soit `right`
Type d'animation	discrète

Compatibilité des navigateurs

BCD tables only load in the browser