浮动文本的垂直对齐答案

【问题标题】：Vertical alignment of floated text浮动文本的垂直对齐
【发布时间】：2014-10-29 12:06:31
【问题描述】：

我需要一些浮动文本在充满文本的表格单元格中垂直居中。此代码仅适用于单行，否则会失去对齐。

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

除了浮动元素（例如没有其他列）之外，我可能无法使用任何其他方法来解决它，但我会接受任何建议。

测试代码：http://jsfiddle.net/x49rv6dz/

【问题讨论】：

使用绝对位置？ jsfiddle.net/x49rv6dz/8
为什么“可能不能”？您是，还是不允许更改 html 并设置另一个单元格？
表格是动态的，绝对位置不能解决问题。我无法设置新列，但我可以随意编辑代码
一个解决方案可能是嵌套表，但我不喜欢它......我要到明天才能测试它，所以我什至不确定它是否会工作。

标签： html css-float vertical-alignment

【解决方案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/

【讨论】：