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. Cette propriété fonctionne comme 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;

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

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.
Version de travail 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 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
Médiavisuel
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
Ordre canoniquel'ordre d'apparition dans la grammaire formelle des valeurs

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 3Opera Support complet OuiSafari Support complet 1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS ? Samsung Internet Android Support complet Oui
Prefixed center, left, and right values for block alignment
ObsolèteNon-standard
Chrome Support complet 1
Préfixée
Support complet 1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge ? Firefox Support complet 1
Préfixée
Support complet 1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Aucun support NonOpera ? Safari Support complet 1.3
Préfixée
Support complet 1.3
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -khtml-
WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Flow-relative values start and end
Expérimentale
Chrome Support complet 1Edge Aucun support NonFirefox Support complet 1IE Aucun support NonOpera ? Safari Support complet 3.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 4Opera Android ? Safari iOS ? Samsung Internet Android ?
match-parent
Expérimentale
Chrome Support complet 16Edge ? Firefox Support complet 40IE Aucun support NonOpera ? Safari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 40Opera Android ? Safari iOS ? Samsung Internet Android ?
justify-all
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
Character-based alignment in a table column (<string> value)
Expérimentale
Chrome Aucun support NonEdge ? Firefox Aucun support NonIE ? Opera ? Safari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS Aucun support NonSamsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, SpaVec, NicolasGoudry, Sebastianz, teoli, FredB, Mgjbot, Fredchat, Kyodev
Dernière mise à jour par : SphinxKnight,