How do I vertical-align text relative to a floated image?

There are a number of questions addressing this issue, but none addressing vertical alignment relative to a floated image or block-level element.

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

This does not produce the desired result, since the image is floating. I have tried a lot of things, including adding a after the tag, making the span display as a block level element, and other ways to position the image (aligned to the right of the containing ) without floating it, but have not had success.

UPDATE: I have been unable to get any of the proposed solutions working. If this can't be done, so be it, but I'm leaving this open until I can be sure it can't. I've created a jsFiddle with the开发者_开发知识库 HTML, in hopes that someone can write CSS which demonstrates a solution.

---

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

The <td> tag is align middle by default

---

You would need to wrap the span and image in the same <div> and apply the float to the div instead.

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

---

This can not be done without modifying the given document structure, at least given CSS2.1. I'd still love to see a CSS3 solution, if anyone can provide one.