Question

获得了这段简单的html代码，我想让TEST（第三个<td>组件）对齐到行的底部，但无论我尝试什么，它都会保持不变。

我知道有成千上万的这类问题我阅读了3-4篇文章，但没有我试过的东西。

    <table border="0">
        <tr>
            <td width="144" height="125"><img src="images/logo.png" alt="CommuniTake" width="143"
                height="123"></td>
            <td width="775">
            <h1><h:outputText value="#{msg.General_Configuration_Title}" /></h1>
            </td>
            <td style="float:right;vertical-align:text-bottom">
            TEST
            </td>
        </tr>
    </table>

谢谢！

Answer 1

<td valign="bottom">

应该有效

Answer 2

怎么样：

<table border="0">
    <tr>
        <td width="144" height="125"><img src="images/logo.png" alt="CommuniTake" width="143"
            height="123"></td>
        <td width="775">
        <h1><h:outputText value="#{msg.General_Configuration_Title}" /></h1>
        </td>
        <td valign="bottom">
        TEST
        </td>
    </tr>
</table>

Answer 3

只需删除float并将其设为vertical-align: bottom，它就会落入深渊！

Answer 4

来自W3Schools：

text-bottom元素的底部与父元素的字体
的底部对齐

可能是这个td没有父元素，它具有要对齐的字体。如其他人所建议的那样，使用简单的“ bottom ”将与同一行中的最低元素对齐。

如何使此代码垂直对齐到底部

4 个答案: