CSS Alignement du texte
Alignement du texte CSS et direction du texte
Dans ce chapitre, vous apprendrez les propriétés suivantes :
Alignement du texte
La propriété text-align est utilisée pour définir l'alignement horizontal d'un texte.
Cette propriété peut avoir l'une des valeurs suivantes :
-
left- Aligne le texte à gauche -
right- Aligne le texte à droite -
center- Centre le texte -
justify- Étire les lignes pour que chaque ligne ait une largeur égale
L'exemple suivant montre un texte aligné à gauche, à droite et centré (l'alignement à gauche est par défaut si la direction du texte est de gauche à droite, et l'alignement à droite est par défaut si la direction du texte est de droite à gauche) :
Exemple
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
} Lorsque la propriété text-align est définie sur "justify", chaque ligne est étirée pour que toutes les lignes aient une largeur égale, et les marges gauche et droite sont droites (comme dans les magazines et les journaux) :
Exemple
div {
text-align: justify;
} Alignement de la dernière ligne
La propriété text-align-last spécifie comment aligner la dernière ligne d'un texte.
Cette propriété peut avoir l'une des valeurs suivantes :
-
auto- Valeur par défaut. La dernière ligne est justifiée et alignée à gauche -
left- La dernière ligne est alignée à gauche -
right- La dernière ligne est alignée à droite -
center- La dernière ligne est centrée -
justify- La dernière ligne est justifiée comme le reste des lignes -
start- La dernière ligne est alignée au début de la ligne -
end- La dernière ligne est alignée à la fin de la ligne
Exemple
Différents alignements de la dernière ligne dans trois éléments <p> :
p.a {
text-align-last: right;
}
p.b {
text-align-last: center;
}
p.c {
text-align-last: justify;
} Alignement vertical
La propriété vertical-align définit l'alignement vertical d'un élément.
Cette propriété peut avoir l'une des valeurs suivantes :
-
baseline- Valeur par défaut. L'élément est aligné avec la ligne de base du parent -
length/%- Élève ou abaisse un élément par la longueur ou le pourcentage spécifié -
sub- L'élément est aligné avec la ligne de base de l'indice du parent -
super- L'élément est aligné avec la ligne de base de l'exposant du parent -
top- L'élément est aligné avec le haut de l'élément le plus haut sur la ligne -
text-top- L'élément est aligné avec le haut de la police de l'élément parent -
middle- L'élément est placé au milieu de l'élément parent -
bottom- L'élément est aligné avec l'élément le plus bas sur la ligne -
text-bottom- L'élément est aligné avec le bas de la police de l'élément parent
Exemple
Définir l'alignement vertical d'une image dans un texte :
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
} Direction du texte
La propriété direction spécifie la direction du texte/direction d'écriture au sein d'un élément de niveau bloc.
Conseil : Utilisez cette propriété avec la propriété unicode-bidi pour définir ou retourner si le texte doit être remplacé pour prendre en charge plusieurs langues dans le même document.
Exemple
p {
direction: rtl;
unicode-bidi: bidi-override;
} Les propriétés d'alignement et de direction du texte en CSS
| Propriété | Description |
|---|---|
| direction | Spécifie la direction du texte/direction d'écriture |
| text-align | Spécifie l'alignement horizontal du texte |
| text-align-last | Spécifie comment aligner la dernière ligne d'un texte |
| unicode-bidi | Utilisé avec la propriété direction pour définir ou retourner si le texte doit être remplacé pour prendre en charge plusieurs langues dans le même document |
| vertical-align | Définit l'alignement vertical d'un élément |