浮动文字的垂直对齐

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/