Text-align - Propriété CSS

Schéma de la syntaxe de text-align.

Description des termes utilisés sur le schéma :

• char est un caractère unique, inscrit entre apostrophes ou guillemets.

Description de la propriété text-align.

La propriété text-align définit l'alignement du texte dans l'espace qui lui est réservé : les lignes sont elles calées à gauche, à droite, ou bien le texte est-il justifié ?

Plus précisément, text-align est une propriété raccourcie qui permet de définir en une seule écriture les deux propriétés suivantes :

• text-align-all : alignement de toutes les lignes du ou des paragraphes, sauf la dernière si celle-ci est définie spécifiquement par la propriété suivante.
• text-align-last : alignement de la dernière ligne du ou des paragraphes. Si cette propriété n'est pas spécifiée, la dernière ligne est alignée comme le reste du paragraphe. Une exception cependant : si le paragraphe est justifié, la dernière ligne⁽¹⁾ sera alignée du côté start (à gauche pour les langues latines).

(1) On désigne par "dernière ligne" bien sûr celle qui termine le texte de l'élément, mais aussi celles qui précèdent les retours à la ligne éventuels (balises br/).

Voici, en résumé ce que fait la propriété text-align sur l'ensemble des lignes de texte de l'élément. On voit, en examinant ce tableau, que la propriété text-align-all n'est vraiment pas nécessaire, et que la propriété text-align-last ne sera utilisée que dans un cas très particulier : cette présentation que l'on voit dans certains livres (et sur ce paragraphe), qui consiste à justifier le texte, sauf les dernières lignes des paragraphes qui sont centrées.

Dans le cas d'un texte justifié, la justification peut être finement ajustée avec la propriété text-justify.

Prise en charge de la langue.

Les langues non latines ne s'écrivent pas toutes de gauche à droite et du haut vers le bas. Pour prendre en compte ces particularités, il est conseillé d'utiliser les valeurs logiques (start, end) plutôt que les valeurs physiques (left, right).

Valeurs pour text-align.

• text-align: start; text-align: end;

  Le contenu est aligné du côté du début ou de la fin des lignes, compte tenu du sens d'écriture. start est donc équivalent à left pour les langues latines, tandis que pour les langues arabes, left est équivalent à right. D'autres langues s'écrivent verticalement (CJK, hébreu, etc.), dans tous les cas, start correspond au début des lignes, et end à la fin des lignes.

  Voir la propriété direction pour ce qui est de la gestion de la direction d'écriture.

  Le texte peut être aligné par rapport à un des bords d’un bloc de texte. Si le texte est aligné par rapport aux deux bords, on dit qu'il est justifié. En général, la dernière ligne du texte d’un paragraphe n'est pas justifiée: elle peut être alignée à droite, à gauche, ou centrée.

  Langue française
  text-align:start

  يمكن محاذاة النص مع أحد حواف إطار النص. إذا تمت محاذاة النص مع كلا الحافتين، فيُقال إنه مبرر. بشكل عام، لا يتم تبرير السطر الأخير من النص في فقرة ما: يمكن أن يكون محاذياً لليمين أو لليسار أو، في أغلب الأحيان، في المنتصف.

  Langue arabe
  text-align:start
• text-align: left; text-align: right;

  Le contenu est aligné sur la droite de l'élément. Ces valeurs sont des valeurs physiques, qui ne prennent pas en compte la direction d'écriture en fonction de la langue.

  Le texte peut être aligné par rapport à un des bords d’un bloc de texte. Si le texte est aligné par rapport aux deux bords, on dit qu'il est justifié. En général, la dernière ligne du texte d’un paragraphe n'est pas justifiée: elle peut être alignée à droite, à gauche, ou centrée.

  Langue française
  text-align:left

  يمكن محاذاة النص مع أحد حواف إطار النص. إذا تمت محاذاة النص مع كلا الحافتين، فيُقال إنه مبرر. بشكل عام، لا يتم تبرير السطر الأخير من النص في فقرة ما: يمكن أن يكون محاذياً لليمين أو لليسار أو، في أغلب الأحيان، في المنتصف.

  Langue arabe
  text-align:left
• text-align: center;

  Le texte est centré enter les bords droit et gauche de l'élément.

  Le texte peut être aligné par rapport à un des bords d’un bloc de texte. Si le texte est aligné par rapport aux deux bords, on dit qu'il est justifié. En général, la dernière ligne du texte d’un paragraphe n'est pas justifiée: elle peut être alignée à droite, à gauche, ou centrée.

  Langue française
  text-align:center

  يمكن محاذاة النص مع أحد حواف إطار النص. إذا تمت محاذاة النص مع كلا الحافتين، فيُقال إنه مبرر. بشكل عام، لا يتم تبرير السطر الأخير من النص في فقرة ما: يمكن أن يكون محاذياً لليمين أو لليسار أو، في أغلب الأحيان، في المنتصف.

  Langue arabe
  text-align:center
• text-align: justify;

  Justifie le texte dans l'élément, c'est à dire que toutes les lignes de texte ont la même longueur. La dernière ligne de chaque paragraphe ou les lignes qui sont suivies d'un retour forcé (balise br restent cependant calée du côté start sauf indication contraire par la propriété text-align-last.

  La méthode utilisée pour justifier le texte est définie par text-justify : cela peut se faire soit en espaçant les mots, soit en espaçant les lettres.

  Le texte peut être aligné par rapport à un des bords d’un bloc de texte. Si le texte est aligné par rapport aux deux bords, on dit qu'il est justifié. En général, la dernière ligne du texte d’un paragraphe n'est pas justifiée: elle peut être alignée à droite, à gauche, ou centrée.

  Langue française
  text-align:justify

  يمكن محاذاة النص مع أحد حواف إطار النص. إذا تمت محاذاة النص مع كلا الحافتين، فيُقال إنه مبرر. بشكل عام، لا يتم تبرير السطر الأخير من النص في فقرة ما: يمكن أن يكون محاذياً لليمين أو لليسار أو، في أغلب الأحيان، في المنتصف.

  Langue arabe
  text-align:justify
• text-align: justify-all; ⚠

  Le texte est justifié y compris la dernière ligne des paragraphes.

  Attention ! La justification de la dernière ligne des paragraphes peut donner un résultat inesthétique, particulièrement s'il y a peu de mots sur la dernière ligne.

  ⚠ L'exemple ci-dessous est une simulation car peu de navigtateurs traitent encore correctement cette valeur.

  Le texte peut être aligné par rapport à un des bords d’un bloc de texte. Si le texte est aligné par rapport aux deux bords, on dit qu'il est justifié. En général, la dernière ligne du texte d’un paragraphe n'est pas justifiée: elle peut être alignée à droite, à gauche, ou centrée.

  Langue française
  text-align:justify; text-align-last:justify

  يمكن محاذاة النص مع أحد حواف إطار النص. إذا تمت محاذاة النص مع كلا الحافتين، فيُقال إنه مبرر. بشكل عام، لا يتم تبرير السطر الأخير من النص في فقرة ما: يمكن أن يكون محاذياً لليمين أو لليسار أو، في أغلب الأحيان، في المنتصف.

  Langue arabe
  text-align:justify-all
• text-align: match-parent; ⚠

  Cette valeur est équivalente à inherit, sauf si les directions d'écriture de l'élément et du parent sont différentes.

  Exemple : le texte du parent est aligné sur la valeur start et son mode d'écriture est adapté aux langues latines : son texte est donc aligné sur la gauche.
  L'élément enfant est quant à lui adapté aux langues arabes. Le simple héritage de la valeur start l'aligne sur la droite, mais la valeur match-parent le maintient aligné sur la gauche, comme son parent.

  يمكن محاذاة النص مع أحد حواف إطار النص. إذا تمت محاذاة النص مع كلا الحافتين، فيُقال إنه مبرر. بشكل عام، لا يتم تبرير السطر الأخير من النص في فقرة ما: يمكن أن يكون محاذياً لليمين أو لليسار أو، في أغلب الأحيان، في المنتصف.

  Langue arabe
  Parent en langue latine
  text-align:inherit

  يمكن محاذاة النص مع أحد حواف إطار النص. إذا تمت محاذاة النص مع كلا الحافتين، فيُقال إنه مبرر. بشكل عام، لا يتم تبرير السطر الأخير من النص في فقرة ما: يمكن أن يكون محاذياً لليمين أو لليسار أو، في أغلب الأحيان، في المنتصف.

  Langue arabe
  Parent en langue latine
  text-align:match-parent
• text-align: ',' right; ⚠

  Le texte indiqué entre apostrophes ou guillemets ne doit comporter qu'un seul caractère. Cette syntaxe est utilisable pour aligner le contenu des cellules d'un tableau par rapport au caractère indiqué. On s'en servira surtout pour aligner une colonne de nombres sur le séparateur décimal.

  Cas particuliers :

  1. Si seul un caractère est précisé, sans mention de l'alignement, la valeur par défaut pour ce dernier est right.
  2. Si le caractère indiqué n'apparaît pas dans le texte à aligner, l'alignement se fait comme si ce caractère était à la fin.
  3. Si le caractère d'alignement apparaît plusieurs fois, c'est la première occurrence qui est prise en compte.

  245,10	24	1245,10
  41,10	244,50	24,710
  5,451	240,100	45,10

  ⚠ Il et probable que votre navigateur ne traite pas encore cette syntaxe. Le résultat devrait ressembler à la simulation ci-dessous.

  245,10	24	1245,10
  41,10	244,50	24,710
  5,451	240,100	45,10

• text-align: initial; (start) text-align: inherit; text-align: revert; text-align: revertLayer; text-align: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de text-align.

L'animation de la propriété text-align est possible mais ne présente sans doute pas beaucoup d'intérêt visuel. Les valeurs acceptées par text-align étant non numériques, il faut les énumérer une par une dans la description de l'animation (@keyframes).

Exemple interactif avec la propriété text-align.

Le texte utilisé pour la démonstration comporte un retour à la ligne forcé (balise br/) après les mots "plusieurs lignes".

La dernière ligne ne comporte pas de possibilité de retour à la ligne. Cela a été fait avec la propriété white-space fixée à la valeur no-wrap, mais cette situation peut se rencontrer également dans le cas d'une ligne courte comportant un mot très long. Dans ce cas de figure la spécification prévoit que la ligne soit toujours calée du côté start, quelque soit la valeur affectée à text-align.

Le petit tableau présenté plus bas montre l'effet d'un alignement sur un caractère (en français ce sera probablement la virgule), mais cette possibilité est encore mal prise en charge.

Compatibilité des navigateurs avec text-align.

La propriété text-align est bien reconnue en elle-même, mais il reste cependant quelques problèmes de compatibilité (2022) avec les valeurs match-parent ou justify-all nouvellement introduites dans la norme.

1

Propriété
text-align

Estimation de la prise en charge globale.

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Safari

Safari sur IOS

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété text-align.

• CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

  Définition initiale de la propriété text-align dans la version 1 du langage CSS.
  

  17 Novembre 1995

  Document de travail.

  

  12 Novembre 1996

  Proposé à la recommandation.

  

  17 Décembre 1996

  Recommandation.

  

  13 Septembre 2018

  Ancienne spécification, déclarée obsolète.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  La valeur inherit est acceptée.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Texte - Niveau 3

  text-align est changée en une propriété résumée regroupant les valeurs pour text-align-all et text-align-last.
  Les valeurs logiques start et end sont reconnues. Les valeurs match-parent et justify-all sont ajoutées.
  

  27 Janvier 1999

  Document de travail.

  

  22 Décembre 2020

  Candidat à la recommandation.

  

  

• Module CSS - Texte - Niveau 4

  Ajout de la possibilité d'aligner sur un caractère, par exemple pour aligner une colonne de nombres sur le séparateur décimal.
  

  22 Septembre 2015

  Document de travail.

  

  

  

A propos de la gestion des textes, voir aussi.

La propriété text-align est décrite dans la spécification CSS Text Module, de même que tout ce qui concerne la gestion des textes (alignement, espacements, césure, débordement, etc...). Les propriétés suivantes figurent également dans ce module de spécification :

Propriétés :