Comment centrer le texte verticalement à côté d'une image en HTML / CSS?

Question

Quel est le moyen le plus simple et le meilleur de centrer verticalement le texte situé à côté d'une image au format HTML? Doit être agnostique version / type de navigateur. Une solution pure HTML / CSS.

Answer 1

Cela pourrait vous aider à démarrer.

J'ai toujours se rabattre sur cette solution. Pas trop 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 devraient être dans une feuille séparée). Il semble que le défaut d'alignement sur une image (de base) va entraîner le texte pour s'aligner sur la ligne de base; en le définissant à moyen obtient des choses pour les rendre bien, au moins dans FireFox 3.

<div>
    <img src="http://stackoverflow.com/content/img/so/logo.png" style="vertical-align: middle;"/>
    <span style="vertical-align: middle;">Here is some text.</span>
</div>

Answer 2

Est-ce que "pure HTML / CSS" exclut l'utilisation de tableaux? Parce qu'ils feront facilement ce que vous voulez:

 <table>
    <tr>
        <td valign="top"><img src="myImage.jpg" alt="" /></td>
        <td valign="middle">This is my text!</td>
    </tr>
</table>
 

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

Answer 3

Il y a plusieurs façons: Utilisez l'attribut de la balise d'image align = "absmiddle" ou localisez l'image et le texte dans un conteneur DIV ou TD dans un tableau et utilisez

 style="vertical-align:middle"
 

Answer 4

Il y a plusieurs options:

• Vous pouvez utiliser line-height et vous assurer qu'il est grand en tant qu'élément contenant
• Utiliser display: tableau-cellule et alignement vertical: milieu

Mon option préférée serait la première, si c'est un espace court, ou le dernier sinon.