C'est avec la propriété text-align que l'on peut définir l'alignement horizontal du texte dans son conteneur.
Le texte peut être aligné à gauche (left - par défaut), aligné à droite (right), centré (center) ou justifié (justify).

L'alignement à gauche est à privilégier pour les textes de plusieurs phrases. L'alignement centré est à utiliser seulement pour un texte court (une phrase de quelques mots) ou pour les libellés de zones cliquables ou de boutons. La justification n'est pas toujours bien réalisée par les moteurs de rendu des navigateurs qui peuvent provoquer des espacements trop importants entre les mots et rendre le texte peu lisible et peu agréable à l'oeil.

Etrangement, aligner verticalement un texte (ou un bloc) à l'intérieur d'un bloc n'est pas une chose qui se fait de façon naturelle et intuitive.

La propriété vertical-align permet d'aligner verticalement :

• des élements de type en ligne,
• des éléments à l'intérieur d'un élément de type display: table-cell

L'alignement d'éléments de type en ligne se fait par rapport à la hauteur de ligne (line-height) du parent.

L'alignement d'éléments à l'intérieur d'un élément de type display: table-cell se fait par rapport à la hauteur (height) de cet élément.

On peut forcer l'affichage des éléments de type bloc en affichage en ligne avec la propriété display et les valeurs inline et inline-block.

Exemple des différentes valeurs possibles pour la propriété vertical-align.

Aligner image et texte