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中有另一个浮动的元素（在我的情况下是正确的）时，则不遵循vertical-align，并且文本位于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:relative放在TD上。

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

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

请注意，这只会在单元格中的文本中占用一行。

表格单元格中的vertical-align在内部有浮动元素时不起作用

3 个答案: