Question

我正试图通过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>

非常感谢你的帮助！

Answer 1

垂直对齐的快速方法（如您的情况）是将线高与高度相匹配。

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

Answer 2

因为vertical-align只是valign中TD属性的CSS替代品，因此仅适用于display: table-cell元素（并且不是，正确的解决方案不是更改DIV）的显示模式

如果您可以为div设置固定高度，则应该能够将其与margin: auto 0

垂直对齐

Answer 3

效果很好：http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html

Answer 4

尝试将valign="middle"添加到您的td标记中，例如：

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

Answer 5

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

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

Answer 6

尝试使用line-height：100px

CSS - 垂直对齐DIV内容

6 个答案: