text-align

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.

Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

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;

/* Alignement par rapport à un caractère sur d'une colonne */
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.

• Comprendre les règles WCAG 1.4
• Understanding Success Criterion 1.4.8  | Understanding WCAG 2.0 (en anglais)

Spécifications

Compatibilité des navigateurs

Voir aussi

• margin:auto
• margin-left:auto
• vertical-align