Вертикальное выравнивание плавающего текста

Question

Мне нужно, чтобы текст с плавающей точкой был вертикально центрирован в ячейке таблицы, полной текста. Этот код работает только с одной строкой, иначе он потеряет свое выравнивание.

<table style="border: 1px solid red; width: 100%;"> 
    <tr> 
     <td> 
      Content.</br>Content.</br>Content.</br>Content.</br>Content.</br> 
      <span style="line-height: inherit; float: right; vertical-align: middle;">Float</span> 
     </td> 
    </tr> 
</table> 

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

код теста: http://jsfiddle.net/x49rv6dz/

Answer 1

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

<table style="border: 1px solid red; width: 100%;"> 
    <tr> 
     <td> 
      <table style="border-collapse: collapse; border: 0px; width: 100%;"> 
       <tr> 
        <td> 
         Content.</br>Content.</br>Content.</br>Content.</br>Content.</br> 
        </td> 
        <td> 
         <span style="line-height: inherit; float: right; vertical-align: middle;">Float</span> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

код теста: http://jsfiddle.net/oucL931d/