html - 当 中有 float 元素时，表格单元格中的垂直对齐不起作用

Question

这个 fiddle 演示了这个问题:http://jsfiddle.net/wrYsx/

相关代码:

<style>
    #floater {
        background-color: red;
        height: 35px;
        width: 35px;
        float: right;
    }

    table {
        width: 100%;
    }

    table tr td {
        border: 1px solid green;
        vertical-align: middle;
        height: 35px;
    }
</style>
<table>
    <tr>
        <td>
            <div id='floater'></div>
            some text
        </td>
    </tr>
</table>

<table>
    <tr>
        <td>
            some text
        </td>
    </tr>
</table>

基本上，如果我有一个给定高度的 td，我可以使用 vertical-align: middle 使 td 中的内容居中。但是，当 td 中有另一个元素 float 时(在我的例子中就是这样)，那么垂直对齐就不会被遵守，文本位于 td 的顶部。有什么想法可以设计它的样式，以便您可以拥有带有垂直对齐和 float 元素的 td 吗？

此外，我发现了这篇文章:stackoverflow.com/questions/2641615/table-cell-doesnt-obey-vertical-align-css-declaration-when-it-contains-a-floate 但这不是我的解决方案，因为我可能需要 float 元素。我试过使用定位来模拟相同的布局，但似乎我无法定位 td 单元格，因此我可以在其中使用 position: absolute 将“ float ”元素定位在右侧:0。

Answer 1

尝试向 td 添加一个空元素。

<span class="vertical_aligner"></span>

.vertical_aligner {
    vertical-align: middle;
    height: 100%;
    display: inline-block;
}