CSS : text-align - Web Formation

Description

La propriété text-align permet de définir l’alignement horizontal du texte à l’intérieur d’un élément HTML.

Elle s’applique principalement aux éléments contenant du texte (paragraphe, div, titre, cellule de tableau, etc.).

La propriété text-align n’aligne pas l’élément lui-même, mais son contenu textuel.

Pour centrer un bloc, il faut utiliser d’autres propriétés (ex. : margin: auto ou display: flex).

Propriétés détaillées

text-align : définit l’alignement horizontal du texte à l’intérieur d’un élément.
text-align-last : définit l’alignement de la dernière ligne dans un paragraphe justifié.
direction : gère le sens d’écriture (utile pour certains alignements spécifiques, comme RTL).

Valeurs possible

Voici les valeurs les plus courantes utilisables pour text-align :

Valeur	Exemple	Description
left	`text-align: left;`	Aligne le texte à gauche (par défaut en français et en anglais).
right	`text-align: right;`	Aligne le texte à droite.
center	`text-align: center;`	Centre le texte horizontalement.
justify	`text-align: justify;`	Étire chaque ligne pour aligner le texte à gauche et à droite.

Sur le web, on évite généralement de justifier le texte, car les navigateurs ne gèrent pas la césure aussi bien que les logiciels professionnels. Le texte justifié crée souvent de grands espaces irréguliers entre les mots, surtout sur mobile, ce qui rend la lecture moins confortable et moins accessible.

On privilégie donc l’alignement à gauche, beaucoup plus lisible et stable en mise en page responsive. La justification ne s’utilise que dans des cas très particuliers, lorsque la largeur de la colonne est fixe et que l’on accepte un rendu typographique moins contrôlé que sur papier.

Exemple

Démonstration interactive : text-align

Choisissez une valeur

Aperçu

Lorem ipsum dolor sit

Consectetur adipiscing elit. Ut commodo finibus convallis. Nullam malesuada at ex non ultricies. Phasellus hendrerit dui at nisl consequat eleifend. Donec bibendum nisi nec ex finibus, in tincidunt augue ornare. In viverra enim vitae nunc cursus, a vestibulum ipsum imperdiet. Morbi eu posuere lorem. Sed eu nibh ut tortor euismod ultricies in at metus.

Code HTML & CSS

<p class="demo">Lorem ipsum dolor sit</p>

<p class="demo">Consectetur adipiscing elit. Ut commodo finibus convallis. Nullam malesuada at ex non ultricies. Phasellus hendrerit dui at nisl consequat eleifend. Donec bibendum nisi nec ex finibus, in tincidunt augue ornare. In viverra enim vitae nunc cursus, a vestibulum ipsum imperdiet. Morbi eu posuere lorem. Sed eu nibh ut tortor euismod ultricies in at metus.</p>

<p class="demo">Lorem ipsum dolor sit</p><p class="demo">Consectetur adipiscing elit. Ut commodo finibus convallis. Nullam malesuada at ex non ultricies. Phasellus hendrerit dui at nisl consequat eleifend. Donec bibendum nisi nec ex finibus, in tincidunt augue ornare. In viverra enim vitae nunc cursus, a vestibulum ipsum imperdiet. Morbi eu posuere lorem. Sed eu nibh ut tortor euismod ultricies in at metus.</p>

.demo {
    background-color: lightgrey;
    text-align: left;
}

.demo {    background-color: lightgrey;    text-align: left;}

.demo {
    background-color: lightgrey;
    text-align: right;
}

.demo {    background-color: lightgrey;    text-align: right;}

.demo {
    background-color: lightgrey;
    text-align: center;
}

.demo {    background-color: lightgrey;    text-align: center;}

.demo {
    background-color: lightgrey;
    text-align: justify;
}

.demo {    background-color: lightgrey;    text-align: justify;}

Remarques

text-align n’a pas d’effet sur les éléments en display inline eux-mêmes, mais il affecte le texte à l’intérieur de leur parent.