Как выровнять текст по вертикали относительно плавающего изображения?

Question

Существует ряд вопросов, касающихся этой проблемы, но ни один из них не касается вертикального выравнивания относительно плавающего изображения или элемента уровня блока.

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

Это не дает желаемого результата, поскольку изображениеплавающий.Я пробовал много вещей, в том числе добавление тега after, отображение диапазона в качестве элемента уровня блока и другие способы позиционирования изображения (выровненного по правому краю содержимого) без его плавания, но не имели успеха.

ОБНОВЛЕНИЕ: Мне не удалось заставить работать ни одно из предложенных решений.Если это невозможно, пусть будет так, но я оставляю это открытым, пока не буду уверен, что это невозможно.Я создал jsFiddle с HTML в надежде, что кто-то сможет написать CSS, который демонстрирует решение.

Answer 1

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

Тег

по умолчанию выровнен по середине

Answer 2

Это невозможно сделать без изменения данной структуры документа, по крайней мере, с учетом CSS2.1. Я все еще хотел бы видеть решение CSS3, если кто-нибудь может предоставить его.

Answer 3

Вам нужно будет обернуть диапазон и изображение в одно и то же <div> и вместо этого применить плавающий элемент к элементу div.

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