Attribut text-align CSS

Définition et utilisation

L'attribut text-align définit le mode d'alignement horizontal du texte dans l'élément.

Cette propriété définit l'alignement horizontal du texte à l'intérieur des éléments en bloc en spécifiant quel point de la boîte de ligne doit être aligné. En permettant à l'agent utilisateur de ajuster l'espacement entre les lettres et les mots dans le contenu de la ligne, elle supporte la valeur justify ; les résultats peuvent varier d'un agent utilisateur à l'autre.

Veuillez également consulter :

Tutoriel CSS :Texte CSS

Manuel de référence HTML DOM :Attribut textAlign

Exemple

Définir le mode d'alignement du texte des éléments h1, h2, h3 :

h1 {text-align:center;}
h2 {text-align:left;}
h3 {text-align:right;}

Essayez-le vous-même

Syntaxe CSS

text-align: left|right|center|justify|initial|inherit;

Valeur de l'attribut

Valeur Description
gauche Aligner le texte à gauche. Valeur par défaut : déterminée par le navigateur.
droite Aligner le texte à droite.
center Aligner le texte au centre.
justify Réaliser l'effet de texte aligné à deux extrémités.
inherit Inclure la valeur de l'attribut text-align de l'élément parent.

Valeur justify

Le dernier attribut d'alignement horizontal est justify, qui pose quelques problèmes.

La valeur justify aligne les deux extrémités du texte. Dans le texte aligné à deux extrémités, les deux extrémités des lignes de texte sont placées sur les bords internes de l'élément parent. Ensuite, ajustez l'espacement entre les mots et les lettres pour que la longueur de chaque ligne soit exactement égale. Vous avez peut-être remarqué que le texte aligné à deux extrémités est très courant dans le domaine de l'impression. Cependant, dans le CSS, il faut faire davantage de considérations.

Il doit être déterminé par l'agent utilisateur (plutôt que par le CSS) pour déterminer comment le texte aligné à deux extrémités est étiré pour remplir l'espace entre les bords gauche et droit de l'élément parent. Par exemple, certains navigateurs peuvent ajouter de l'espace supplémentaire entre les mots, tandis que d'autres peuvent répartir uniformément l'espace supplémentaire entre les lettres (bien que la norme CSS précise spécifiquement que, si Attribut letter-spacingSpécifié comme une valeur de longueur ("l'agent utilisateur ne peut pas augmenter ou diminuer davantage l'espace entre les caractères"). Certains agents utilisateur pourraient également réduire l'espace de certaines lignes, rendant le texte plus serré. Toutes ces pratiques affectent l'apparence de l'élément, même sa hauteur, cela dépend de l'impact de l'alignement de l'agent utilisateur sur le nombre de lignes de texte.

Le CSS ne spécifie pas non plus comment traiter les tirets (note 1). La plupart des textes alignés à deux extrémités utilisent des tirets pour séparer les mots longs en deux lignes, réduisant ainsi l'espacement entre les mots et améliorant l'apparence des lignes de texte. Cependant, car le CSS ne définit pas le comportement des tirets, les agents utilisateur ne sont pas très susceptibles d'ajouter automatiquement des tirets. Par conséquent, les textes alignés à deux extrémités dans le CSS ne paraissent pas aussi bien imprimés, en particulier lorsque les éléments peuvent être trop étroits pour ne pouvoir contenir que quelques mots par ligne. Bien sûr, l'utilisation d'éléments de conception étroite est possible, mais il faut être vigilant aux inconvénients correspondants.

Note 1 :Le CSS ne précise pas comment traiter les tirets, car les règles des tirets diffèrent d'une langue à l'autre. La norme n'a pas essayé de reconcilier ces règles probablement incomplètes, mais a simplement omis ce problème.

Détails techniques

Valeur par défaut : Si l'attribut direction est ltr, la valeur par défaut est left ; si direction est rtl, alors c'est right.
Héritabilité : oui
Version : CSS1
Syntaxe JavaScript : object.style.textAlign="right"

Plus d'exemples

Aligner le texte
Cet exemple montre comment aligner le texte.

Support du navigateur

Les nombres dans le tableau indiquent la première version de navigateur qui prend en charge cette propriété complètement.

Chrome IE / Edge Firefox Safari Opera
1.0 3.0 1.0 1.0 3.5