Comment aligner verticalement une image et une ligne de texte

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;
}

Testez chaque valeur dans la démonstration ci-dessous : la zone colorée matérialise la ligne de texte, agrandie par le mot « Grand ».

<p class="ligne">
  <img src="/apple-touch-icon.png" alt="" width="60" height="60">
  Texte à aligner <span class="grand">Grand</span>
</p>

<label for="valeur">Valeur de vertical-align :</label>
<select id="valeur">
  <option>baseline</option>
  <option>middle</option>
  <option>sub</option>
  <option>super</option>
  <option>text-top</option>
  <option>text-bottom</option>
  <option>top</option>
  <option>bottom</option>
  <option>15px</option>
  <option>-30px</option>
  <option>100%</option>
</select>
<output for="valeur">img { vertical-align: baseline; }</output>

.ligne {
  font-size: 1.5rem;
  background-color: #eef3d9;
}

.grand {
  font-size: 3rem;
}

output {
  display: block;
  margin-block-start: 0.5rem;
  font-family: monospace;
}

const image = document.querySelector(".ligne img")
const valeur = document.querySelector("#valeur")
const code = document.querySelector("output")

valeur.addEventListener("change", () => {
  image.style.verticalAlign = valeur.value
  code.textContent = `img { vertical-align: ${valeur.value}; }`
})

Les différentes valeurs possibles sont :

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