Question

我知道之前在这个网站上已经提出并回答了类似的问题，但不幸的是，没有一个答案能够提供帮助。

我需要将文本垂直对齐在表格行的中心/底部。这是我的css文字：

h3 {
    vertical-align:bottom;
    font-weight: lighter;
    padding-top: 0px;
    background: url(images/bg3.jpg);
    background-repeat: no-repeat;
    background-position:left bottom;}

Answer 1

如果您的文字是单行，请使用line-height = height：

h3 {
   height: 30px;
   line-height: 30px;
   display: inline-block;
}

Answer 2

在表格单元格中使用align和valign属性：

<table width="100%" border="1">
    <tr>
        <td height="300" align="center" valign="middle">
            <h3>Hello World</h3>
        </td>
    </tr>
</table>

jsFiddle Demo

Answer 3

从您的问题看来，您似乎想要垂直对齐底部和水平到中心..如果这是真的，您应该这样做：

FIDDLE

td    { text-align:center; vertical-align:bottom;}

*请注意，样式需要在表格单元格而不是内部元素上（h3）

祝你好运！

垂直对齐表格单元格中心的文本

3 个答案: