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

Question

这个小提琴演示了这个问题：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 中有另一个浮动元素时（在我的情况下是正确的），则不尊重垂直对齐，并且文本位于 td 的顶部。任何想法如何设置这个样式，以便您可以拥有一个带有垂直对齐和浮动元素的 td？

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

Answer 1

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

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

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

Answer 2

绝对定位似乎可以胜任。你只需要确保你穿上position:relativeTD。

#floater {
    background-color: red;
    height: 35px;
    width: 35px;
    position:absolute;
    top:0;
    right:0
}

table {
    width: 100%;
}

table tr td {
    border: 1px solid green;
    vertical-align: middle;
    height: 35px;
    position:relative;
}

Answer 3

您可以line-height在表格单元格上设置 以匹配单元格的高度来解决此问题。

jsFiddle 示例

table tr td {
    border: 1px solid green;
    vertical-align: middle;
    height: 35px;
    line-height:35px;
}
​

请注意，这仅适用于单元格中的文本占用一行。