text-align

La propriété text-align décrit la façon dont un texte en ligne (inline) est alignée dans le bloc de son élément parent. text-align ne contrôle pas l'alignement des éléments en bloc, uniquement celui du contenu en ligne.

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;

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

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

Identique à justify mais force également la justification pour la dernière ligne.

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.

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;
}

Spécifications

Compatibilité des navigateurs

[1] WebKit et Gecko supportent une version préfixée de left, center et right qui s'applique au contenu en ligne mais aussi aux éléments de bloc. Ces versions sont utilisées pour implémenter les attributs historiques align pour les éléments de tableaux et pour les éléments <center>. Elles ne doivent pas être utilisées.

Voir aussi

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