Html CSS-垂直对齐DIV内容_Html_Css

Html CSS-垂直对齐DIV内容

html css

Html CSS-垂直对齐DIV内容,html,css,Html,Css,我试图通过CSS垂直居中一些内容。就我个人而言，我无法找出原因。有人能告诉我为什么不管我做什么，下面HTML中的“test”这个词总是顶部对齐的吗 <html> <head> <title>test</title> </head> <body> <table border='0' cellpadding='0' cellspacing='0'>

我试图通过CSS垂直居中一些内容。就我个人而言，我无法找出原因。有人能告诉我为什么不管我做什么，下面HTML中的“test”这个词总是顶部对齐的吗

<html>
    <head>
        <title>test</title>
    </head>

    <body>
        <table border='0' cellpadding='0' cellspacing='0'>
            <tr><td style='height:200px; width:300px; background-color:silver;'>
                <div style='height:100%; width:100%; background-color:gray; text-align:center;'>
                    <div style='vertical-align:middle;'>test</div>
                </div>
            </td></tr>
        </table>
    </body>
</html>


测试
测试

非常感谢你的帮助

尝试将

valign=“middle”

添加到您的

td

标签中，如：

<td valign="middle" style='height:200px; width:300px; background-color:silver;'>

尝试设置style='vertical-align:middle；'在父元素中。现在，您确实在告诉内部div将文本对齐到中间，但是您并没有告诉它拉伸并占据整个页面。基本上，您将得到一个与文本一样小的div元素

您可以在Firefox中使用Firebug插件来调试这种CSS问题

尝试使用线条高度：100px

垂直对齐的一种快速方法，就像在您的案例中一样，就是将线条高度与高度匹配。


<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <table border='0' cellpadding='0' cellspacing='0'>
                <tr><td style='height:200px; line-height: 200px; width:300px; background-color:silver;'>
                        <div>
                            <div style="text-align: center">test</div>
                        </div>
                </td></tr>
        </table>
    </body>
</html>
测试
测试

因为

垂直对齐

只是

TD

中

valign

属性的CSS替代，因此只对

显示：表格单元格

元素有效（不，正确的解决方案是不更改

DIV

的显示模式）

如果可以为div设置一个固定高度，则应该能够将其与

边距：auto 0

垂直对齐。这很有效：

为什么它在表中？你知道表格不是用来布局的吗？也许这在大多数浏览器中都适用，但它不符合标准。另一方面，表格的使用也不好。问题是如何垂直对齐

div

内容，而不是

td

内容。