Comment puis-je centrer le texte vertical à côté d’une image au format HTML / CSS?

Cela pourrait vous aider à démarrer.

Je me rabat toujours sur cette solution . Pas trop de hack-ish et fait le travail.

EDIT: Je tiens à souligner que vous pouvez obtenir l’effet que vous voulez avec le code suivant (pardonnez les styles en ligne; ils doivent figurer dans une feuille séparée). Il semble que l’alignement par défaut sur une image (ligne de base) entraîne l’alignement du texte sur la ligne de base; mettre cela au milieu permet de rendre les choses bien, au moins dans FireFox 3.

  Here is some text.  

Est-ce que “HTML / CSS pur” exclut l’utilisation de tables? Parce qu’ils feront facilement ce que vous voulez:

 
 
 
 
This is my text!
 
  

Flame moi tout ce que tu aimes, mais ça marche (et ça marche dans les vieux navigateurs).

Il y a plusieurs façons: Utiliser l’atsortingbut de la balise image align = “absmiddle” ou localiser l’image et le texte dans un conteneur DIV ou TD dans une table et utiliser

 style="vertical-align:middle" 

C’est amusant. Si vous connaissez à l’avance la hauteur du conteneur du texte, vous pouvez utiliser une hauteur de ligne égale à cette hauteur et centrer le texte verticalement.

Il y a plusieurs options:

• Vous pouvez utiliser la hauteur de ligne et vous assurer qu’elle est haute en tant qu’élément contenant
• Utiliser l’affichage: cellule de table et alignement vertical: milieu

Mon option préférée serait la première, si l’espace est court, ou la seconde sinon.

Je recommande d’utiliser des tables avec

(comme mentionné dans inkedmn , cela fonctionne dans tous les navigateurs), mais si vous utilisez un lien, voici comment le faire (fonctionne aussi dans les vieux navigateurs laids, comme Opera 9):

   Sample text  

Un moyen de base qui vient à l’esprit serait de placer l’élément dans une table et d’avoir deux cellules, une avec le texte, l’autre avec l’image, et utiliser style = “valign: center” avec les balises.