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.
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 |
Média | visuel |
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 |
Animable | non |
Ordre canonique | l'ordre d'apparition dans la grammaire formelle des valeurs |
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 queright
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 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-all
- Identique à
justify
mais force également la justification pour la dernière ligne. match-parent
- 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.
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
Spécification | Statut | Commentaires |
---|---|---|
CSS Logical Properties Level 1 La définition de 'text-align' dans cette spécification. |
Brouillon de l'éditeur | Aucun changement |
CSS Text 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. |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Support simple (left , right , center et justify ) |
1.0 | 1.0 (1.7 ou moins) | 3.0 | 3.5 | 1.0 (85) |
Valeurs d'alignement de bloc | 1.0-webkit | 1.0 (1.7 ou moins)-moz[1] | Pas de support | Pas de support | 1.0 (85)-khtml 1.3 (312)-webkit [1] |
start |
1.0 | 1.0 (1.7 ou moins) | Pas de support | (Oui) | 3.1 (525) |
end |
1.0 | 3.6 (1.9.2) | Pas de support | (Oui) | 3.1 (525) |
match-parent |
16 | 40 (40) | Pas de support | Pas de support | Pas de support |
Fonctionnalité | Android | Chrome pour Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Support simple (left , right , center et justify ) |
? | ? | ? | ? | ? | ? |
Valeurs d'alignement de bloc | ? | ? | ? | ? | ? | ? |
start |
? | ? | ? | ? | ? | ? |
end |
? | ? | ? | ? | ? | ? |
match-parent |
? | ? | 40.0 (40) | ? | ? | ? |
[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
Étiquettes et contributeurs liés au document
Étiquettes :
Contributeurs à cette page :
NicolasGoudry,
SphinxKnight,
Sebastianz,
teoli,
FredB,
Mgjbot,
Fredchat,
Kyodev
Dernière mise à jour par :
NicolasGoudry,