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

Code CSS

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
Code CSS

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.

<

Une question? Cliquez ici pour la poser.

Retour sur le portail du HTML/CSS