Comment aligner verticalement du texte par rapport à une image flottante?

Question

Un certain nombre de questions abordent ce problème, mais aucune ne porte sur l'alignement vertical relatif à une image flottante ou à un élément de niveau bloc.

... 
<td> 
    <span style="vertical-align: middle">This should be vertically centered relative to the image</span> 
    <img src="something" style="float: right" /> 
</td> 
... 

Cela ne produit pas le résultat souhaité, car l'image est flottante. J'ai essayé beaucoup de choses, y compris l'ajout d'un après le tag, l'affichage du span en tant qu'élément de niveau bloc, et d'autres façons de positionner l'image (aligné à la droite du conteneur) sans le flotter, mais sans succès .

MISE À JOUR: Je n'ai réussi à obtenir aucune des solutions proposées. Si cela ne peut pas être fait, qu'il en soit ainsi, mais je laisse cela ouvert jusqu'à ce que je puisse être sûr qu'il ne le peut pas. J'ai créé un jsFiddle avec le HTML, dans l'espoir que quelqu'un puisse écrire CSS qui démontre une solution.

Answer 1

Cela ne peut se faire sans modifier la structure du document donné, au moins donné CSS2.1 . J'aimerais toujours voir une solution CSS3, si quelqu'un peut en fournir une.

Answer 2

Vous devez envelopper la plage et l'image dans le même <div> et appliquer le flotteur à la div à la place.

... 
<td> 
    <div style="float: right;"> 
    <span style="vertical-align: middle">This should be vertically centered relative to the image</span> 
    <img src="something" /> 
    </div> 
</td> 
... 

OU

... 
<td style="vertical-align: middle;"> 
    <span>This should be vertically centered relative to the image</span> 
    <img src="something" style="float: right;" /> 
</td> 
... 

Answer 3

... 
<td> 
    <table cellpadding="0" cellspacing="0"> 
    <tr> 
     <td>text here</td> 
     <td style="text-align: right">image here</td> 
    </tr> 
    </table> 
</td> 
... 

Le < td> est par défaut align milieu