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/

浮动文本的垂直对齐方式

1 个答案: