title: Vertical alignment of floated text
body: <p>I need some float text to be vertically centered in a table cell full of text. This code works only with a single line, otherwise it loose its alignment.</p>
  
  <pre><code>&lt;table style="border: 1px solid red; width: 100%;"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              Content.&lt;/br&gt;Content.&lt;/br&gt;Content.&lt;/br&gt;Content.&lt;/br&gt;Content.&lt;/br&gt;
              &lt;span style="line-height: inherit; float: right; vertical-align: middle;"&gt;Float&lt;/span&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I probably can't use any other way to solve it other then the float element (no other columns for example), but I'll approciate any kind of suggestion.</p>
  
  <p>Test code: <a href="http://jsfiddle.net/x49rv6dz/" rel="nofollow">http://jsfiddle.net/x49rv6dz/</a></p>