Aligner du texte est l'un des premiers réglages typographiques que l'on apprend, bien avant le web : à gauche pour un texte courant, centré pour un titre d'affiche, justifié pour un livre. CSS transpose ces quatre alignements classiques dans une seule propriété, text-align.
C'est une propriété simple à utiliser, mais qui prête souvent à confusion avec une autre, justify-content, parce que les deux portent le mot alignement dans leur nom sans agir sur la même chose. Comprendre cette différence évite de chercher pendant de longues minutes pourquoi une propriété censée centrer quelque chose ne produit aucun effet.
Définition
text-align aligne le contenu textuel d'un élément à l'intérieur de sa propre boîte, ligne par ligne. Elle accepte quatre valeurs principales : left, right, center et justify.
h1 {
text-align: center;
}
p {
text-align: justify;
}| Valeur | Effet |
|---|---|
left | Aligne le texte sur le bord gauche de sa boîte |
right | Aligne le texte sur le bord droit |
center | Centre chaque ligne dans la largeur disponible |
justify | Étire les espaces pour que chaque ligne touche les deux bords, sauf la dernière |
start / end | Comme left/right, mais s'adapte au sens de lecture de la langue |
start et end valent la peine d'être connus dès que le site vise plusieurs langues : en français ou en anglais ils équivalent à left et right, mais dans une langue qui se lit de droite à gauche comme l'arabe, ils s'inversent automatiquement, sans qu'il faille écrire de règle spécifique.
La confusion avec justify-content
text-align et justify-content portent des noms proches, mais n'agissent pas au même niveau. text-align positionne le texte à l'intérieur de la boîte qui le contient, sans jamais déplacer cette boîte elle-même. justify-content, propre à Flexbox et à la grille, positionne des boîtes entières les unes par rapport aux autres à l'intérieur d'un conteneur.
Un piège classique : appliquer text-align: center; à un conteneur flex pour tenter de centrer les éléments qu'il contient. Cela ne centre que le texte à l'intérieur de chaque boîte enfant, pas les boîtes elles-mêmes les unes par rapport aux autres. Pour centrer des boîtes dans un conteneur flex, c'est justify-content: center;, posé sur le conteneur, qu'il faut utiliser.
.conteneur {
display: flex;
justify-content: center; /* centre les boîtes enfants entre elles */
}
.conteneur p {
text-align: center; /* centre le texte à l'intérieur de chaque boîte */
}Le cas particulier de justify
La valeur justify étire les espaces entre les mots pour que chaque ligne, sauf la dernière, touche exactement les deux bords de sa boîte. Le résultat évoque la mise en page d'un livre, mais sur des colonnes étroites, comme sur mobile, l'étirement des espaces devient irrégulier et crée des couloirs de blanc verticaux qui traversent plusieurs lignes, un défaut connu sous le nom de rivières typographiques.
Bonnes pratiques
Réservez justify aux colonnes suffisamment larges, en le combinant idéalement avec une coupure de mots automatique pour limiter les rivières. Sur une interface d'application, left ou start reste le choix par défaut le plus sûr pour un texte courant, center convenant davantage aux titres courts, aux boutons ou aux messages ponctuels qu'à de longs paragraphes.
Questions fréquentes
Pourquoi text-align: center ne centre-t-il pas ma div ?
Parce que text-align agit sur le texte, pas sur la boîte qui le contient. Pour centrer un bloc entier horizontalement, il faut agir sur ses marges, par exemple avec margin: 0 auto; associé à une largeur définie, ou passer par Flexbox avec justify-content: center;.
Quelle est la différence entre left et start ?
left désigne toujours le bord gauche physique de l'écran. start désigne le début du sens de lecture, qui correspond à gauche en français mais à droite dans une langue écrite de droite à gauche. Pour un site multilingue, start évite d'avoir à réécrire l'alignement selon la langue.
text-align hérite-t-il aux éléments enfants ?
Oui, text-align fait partie des propriétés qui se transmettent par héritage. Un alignement posé sur un conteneur s'applique donc à tous les textes qu'il contient, sauf si un élément plus profond redéfinit sa propre valeur.
Peut-on justifier un texte sans créer de rivières visibles ?
On peut fortement les atténuer en combinant justify avec une coupure automatique des mots longs en fin de ligne, et en réservant cette valeur aux colonnes assez larges. Mais sur une colonne étroite, aucun réglage ne les élimine totalement : c'est une limite connue de la justification.