M’étant assez souvent arraché les cheveux pour aligner correctement une simple image contenue dans du texte, je suis récemment tombé sur un article très clair détaillant l’utilisation de la propriété CSS vertical-align. Voici la traduction française de cet article.

Intro
Commencons par un exemple – un paragraphe contenant une simple ligne de texte et une petite image (le carré bleu ci-dessus).

Lignes de positionnement
Voyons sans attendre les 6 lignes primaires utilisées lors de l’alignement vertical.

1. top line – cette ligne se situe au dessus de tout le contenu

2. ligne text-top – cette ligne délimite le sommet du texte (en incluant les accents)

NB: Les lignes “top line” and “text-top” peuvent paraître identiques. Mais ce n’est pas le cas, dans certains cas la top line (marquée en rouge ci-dessous), est plus haute que le contenu texte – et par conséquent, plus haute que la ligne text-top (marquée en vert ci-dessous). L’image suivante, très grande (plus haute que le texte) illustre ce cas particulier:

3. middle line – cette ligne se situe au milieu de la hauteur de la lettre x

4. baseline – c’est la ligne imaginaire sur laquelle reposent toutes les lettres

5. text-bottom line – cette ligne se situe en dessous de tout caractère (en incluant des lettres comme “j”, “y”, “g” etc…)

6. bottom line – cette ligne se situe en dessous de tout le contenu

Alignement vertical par défaut

Par défaut, le bas de l’image s’alignera sur la baseline du paragraphe – à moins que l’image ait une margin-bottom d’appliquée. Dans ce cas, le bas de la marge de l’image s’alignera sur la baseline du paragraphe. Dans l’exemple ci-dessous, l’image a la marge suivante: “margin-bottom: 5px” ce qui fait que le bas de l’image se placera 5 pixels au dessus de la baseline.

Utilisation des CSS pour modifier l’alignement vertical

Il est possible de modifier la position verticale des images par rapport au texte l’entourant en utilisant la propriété CSS vertical-align.

Cette propriété peut prendre les valeurs suivantes: top, text-top, middle, baseline, text-bottom, bottom, sub, super, percentage et length.

Top

Le haut de l’image sera aligné avec la top line.

img.class-name { vertical-align: top; }

Text-top

Cela aura pour effet d’aligner le haut de l’image avec la top line.

img.class-name { vertical-align: text-top; }

Middle

Ceci alignera le milieu vertical de l’image avec la baseline plus la moitié de la hauteur de la lettre x du paragraphe.

img.class-name { vertical-align: middle; }

Baseline

Bien que les images soient par défaut alignées par rapport à la baseline, il est possible de spécifier cette option en utilisant les CSS.

img.class-name { vertical-align: baseline; }

Text-bottom

Le bas de l’image sera aligné par rapport à la bottom line.

img.class-name { vertical-align: text-bottom; }

Sub

Ceci alignera le bas de l’image avec la baseline du contenu indicé (qu’il y ait ou non du contenu indicé présent dans le texte).

img.class-name { vertical-align: sub; }

Super

Ceci alignera le bas de l’image avec la basline du contenu exposant (qu’il y ait ou non du contenu exposant présent dans le texte).

img.class-name { vertical-align: super; }

Percentage

Ceci décalera vers le haut (valeur positive) ou vers le bas (valeur négative) l’image par rapport à la baseline de la valeur spécifiée. La valeur ‘0%’ correspond à la baseline inchangée. A noter que le positionnement vertical en pourcentage pourra, une fois n’est pas coutume, varier légèrement selon le navigateur utilisé.

img.class-name { vertical-align: 30%; }

img.class-name { vertical-align: -30%; }

Taille

Ceci décalera vers le haut (valeur positive) ou vers le bas (valeur négative) l’image par rapport à la baseline de la valeur spécifiée. La valeur ‘0px’ correspond à la baseline inchangée.

img.class-name { vertical-align: 2px; }

img.class-name { vertical-align: -2px; }

Voila, j’espère avoir écrit l’article avant que vous n’ayez plus de cheveux

Vous pouvez retrouver l’article original, en Anglais, ici: http://www.maxdesign.com.au/2008/10/05/vertical-align/

Le petit coup de coeur du moment nous vient d’Allemagne et s’appelle Ancient Astronauts, extrait:

Ancient Astronauts [ Funk, Hip-Hop ]
Ambiance: Funk
Albums: We Are To Answer
A écouter: Tout