Comment aligner verticalement une image et une ligne de texte

Astuce par (Alsacréations, Strasbourg)
Créé le , mis à jour le (360707 lectures)
Tags : css, vertical, texte, image, aligner

CSS permet de gérer l'alignement vertical du texte. Prenons cet exemple de code HTML :

<p><img src="image.jpg" alt="" /> Texte à aligner</p>

La propriété CSS vertical-align agit sur le positionnement vertical du texte.

img {
  vertical-align:top;
}

Les différentes valeurs possibles sont :

  • baseline : Alignement sur la ligne de base ou le bas.
    Vertical-align baseline
  • middle : Alignement au milieu de la ligne de base.
    Vertical-align middle
  • sub : Alignement en bas de la ligne de base.
    Vertical-align sub
  • super : Alignement au-dessus de la ligne de base.
    Vertical-align super
  • text-top : Aligne le texte en haut de l'élément parent.
    Vertical-align text-top
  • text-bottom : Aligne le texte en bas de l'élément parent.
    Vertical-align text-bottom
  • top : Alignement haut de la boite parent avec la boite de la ligne.
    Vertical-align top
  • bottom : Alignement haut de la boite parent avec la boite de la ligne.
    Vertical-align bottom
  • longueur : Alignement au-dessus ou au-dessous (valeur négative) de la ligne de base avec des unités absolues.
    Vertical-align 15px
    Vertical-align -30px
  • pourcentage (%) : Alignement au-dessus ou au-dessous de la ligne de base avec des valeurs relatives.
    Vertical-align 100%

Ressources