Aligner un texte au milieu d'une image?

Question

J'ai une colonne de table comme celle-ci, où je veux aligner une image et un texte. Le texte doit figurer au milieu de l'image.

<td><img height='50px' src='blabla'>Hello</td> 

Ce qui précède aligne le texte au bas de l'image.

J'ai également essayé d'ajouter vertical-align:middle à la propriété de style td, sans chance.

J'ai également essayé d'ajouter un <font> et de styliser cela à vertical-align:middle sans chance. Je connais d'une certaine façon, et c'est ajouter une autre colonne de table et avoir le texte et l'image dans des colonnes séparées, alors il serait possible d'aligner le texte verticalement au milieu, mais j'essaie d'éviter cela.

Des idées?

Answer 1

Vous devez ajouter le vertical-align à l'img, pas le td:

<td> 
    <img style="vertical-align: middle;" src="test.jpg"/> 
    test 
</td> 

Pour appliquer le style à toutes les images dans td s, utiliser un CSS externe:

td img { 
    vertical-align: middle; 
} 

Answer 2

Avez-vous essayé d'utiliser valign = "middle"

<td valign="middle"><img height='50px' src='blabla'>Hello</td> 

De plus, pas besoin d'ajouter "px" à la hauteur de l'img.

Answer 3

Ajoutez également un alignement vertical à la ligne, pas seulement à la cellule.

Answer 4

vous allez ici:

<table> 
<tr> 
<td><img height='50' width='50' src='http://www.google.com/images/logos/ps_logo2.png' style='vertical-align:middle;">Hello</td> 
</tr> 
</table> 

http://jsfiddle.net/FDRy8/

Answer 5

utilisation vertical-align:middle sur l'image et non le td

td img{ 
vertical-align:middle; 
} 

exemple de travail à http://www.jsfiddle.net/gaby/pPVtH/