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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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;
/* 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 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
- Comportement analogue à
justify
mais avec la dernière ligne nécessairement justifiée. 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. <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
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. |
Candidat au statut de recommandation | 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 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 |
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 |
Type d'animation | discrète |
Compatibilité des navigateurs
BCD tables only load in the browser