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.
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
/* 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
Expérimental-
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
Expérimental-
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
Expérimental-
Comportement analogue à
justify
mais avec la dernière ligne nécessairement justifiée. match-parent
Expérimental-
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>
Expérimental-
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 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 |
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
Specification |
---|
CSS Logical Properties and Values Level 1 # text-align |
CSS Text Module Level 3 # text-align-property |
Compatibilité des navigateurs
BCD tables only load in the browser