フローティングイメージを基準にテキストを縦に並べるにはどうすればよいですか？

Question

この問題には数多くの質問がありますが、浮動画像またはブロックレベルの要素に比べて垂直方向の配置は扱いません。

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

イメージがフローティングであるため、これは望ましい結果を生成しません。私は、タグの後ろに、ブロックレベルの要素としてスパンの表示を作り、それを浮かべることなくイメージを配置する他の方法を追加することを含め、多くのことを試みましたが、成功しませんでした。

更新日： 提案されているソリューションのいずれも動作させることができませんでした。これを行うことができないなら、そうすることができますが、私はそれができないと確信できるまで、これを開いたままにしておきます。私はjsFiddleをHTMLとともに作成しました。誰かが解決策を示すCSSを書くことを望んでいます。

Answer 1

デフォルトで< TD>タグであるALIGN中央、少なくとも所与CSS2.1 。誰かが提供できるなら、私はまだCSS3のソリューションを見たいと思うだろう。

Answer 2

スパンとイメージを同じ<div>にラップし、divにfloatを適用する必要があります。

... 
<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> 
... 

OR

... 
<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> 
... 

これは、所与の文書の構造を変更せずに行うことができない