Alignement

Vous vous êtes demandés comment vous pouvez définir par exemple l’alignement de vos textes. Ce cours est là pour répondre à votre question.
Nous allons voir deux types d’alignements :

1. l’alignement horizontal
2. l’alignement vertical

1. Alignement horizontal

Pour aligner le texte horizontalement, on utilise text-align qui prend comme valeurs :

• left : alignement à gauche (valeur par défaut)
• center : alignement centré
• right : alignement à droite
• justify: alignement justifié

Exemple :
Code HTML
<h1> Ce titre est centré</h1> <p class="gauche">Ce texte est aligné à gauche</p> <p class="droite">Ce texte est aligné à droite</p> <p class="justify">Ce texte est justifié</p>
Code CSS
h1 { text-align: center; } .gauche { text-align: left; } .droite { text-align: right; } .justify { text-align: justify; }

2. Alignement vertical

L’alignement vertical permet d’aligner un élément verticalement par rapport à la ligne des bases. Pour aligner un élément (texte par exemple) verticalement, on utilise vertical-align qui prend comme valeurs :

• baseline :aligne la ligne de base au même niveau que la ligne du texte (valeur par défaut).
• bottom :alignement en bas c'est-à-dire l'élément est aligné avec le bas élément sur la ligne
• super: : alignement sur, c'est-à-dire placer l’élément en exposant sans pour autant diminuer sa taille.
• text-bottom :: alignement en bas de l’élément parent
• middle: alignement moyen c'est-à-dire l’élément est aligné au milieu de l'élément parent
• sub : aligner sous c'est-à-dire placer l’élément en indice
• text-top : le sommet de l'élément est aligné avec le haut du texte de l'élément parent
• top : Le sommet de l'élément est aligné avec le haut du plus grand élément sur la ligne

Exemple :
Code HTML
<p> AAAAAAAAA<span class="indice">ce texte est en indice</span> </p> <p> BBBBBBBBBBB<span class="exposant">ce texte est en exposant</span> </p> Code CSS
.indice { vertical-align: sub; } .exposant { vertical-align: super; }

Voici la fin de ce chapitre, vous pouvez bien vous amuser avec les autres valeurs tout en jouant avec d’autres éléments comme les images par exemple.

Retour sur le portail du HTML/CSS