text-align

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

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.

Exemple interactif

text-align: start;

text-align: end;

text-align: center;

text-align: justify;

<section>  <div>    <p>      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id      est laborum.    </p>  </div></section>

section {  font-size: 1.5em;}#default-example > div {  width: 250px;}

Syntaxe

css

/* 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

startExpérimental: Cette valeur a le même effet que la valeurleft si la direction du texte va de gauche à droite ou le même effet queright si la direction du texte va de droite à gauche.
endExpérimental: Cette valeur a le même effet que la valeurright si la direction du texte va de gauche à droite ou le même effet queleft 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-allExpérimental: Comportement analogue àjustify mais avec la dernière ligne nécessairement justifiée.
match-parentExpérimental: Semblable àinherit mais les valeursstart etend sont calculées selon la valeur dedirection pour le parent et sont remplacées parleft ouright selon ce qui est adéquat.
<string>Expérimental: 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.

Définition formelle

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

Syntaxe formelle

text-align =
start|
end|
left|
right|
center|
<string>|
justify|
match-parent|
justify-all

Exemples

Alignement à gauche

HTML

html

<p>  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

css

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

Résultat

Texte centré

HTML

html

<p>  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

css

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

Résultat

Justification

HTML

html

<p>  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

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 valeursleft etright àauto, e.g. :

css

.classe {  margin: auto;}

css

.classe {  margin: 0 auto;}

css

.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.