text-align

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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 id="default-example">
  <div id="example-element">
    <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

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.

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.

Définition formelle

Valeur initialestart, 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éeoui
Valeur calculéecomme 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'animationdiscrète

Syntaxe formelle

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

Exemples

Alignement à gauche

HTML

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

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

Résultat

Texte centré

HTML

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

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

Résultat

Justification

HTML

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

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

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.

Spécifications

Specification
CSS Logical Properties and Values Level 1
# text-align
CSS Text Module Level 3
# text-align-property

Compatibilité des navigateurs

Voir aussi