浮動文字的垂直對齊

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>

除float元素外，我可能無法使用任何其他方法來解決它（例如，沒有其他列），但是我會提出任何建議。

測試代碼： 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/