logo标签列表

CSS - 垂直对齐DIV内容

htmlcss
7
我正在尝试通过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>

Thank you very much for your help!

4
为什么它在一个表格里？你知道表格不是用来布局的吧？ - BalusC
6个回答
4

A quick way to vertical align, like in your case, is to match the line-height with the height.

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

4
因为vertical-align只是TD中valign属性的CSS替代品，因此只能在display: table-cell元素上使用（不，正确的解决方案不是更改DIV的显示模式）。
如果您可以给
设置固定高度，则应该能够使用margin: auto 0垂直对齐它。
0

尝试在您的td标签中添加valign="middle"，例如：

<td valign="middle" style='height:200px; width:300px; background-color:silver;'>
可能这在大多数浏览器中都能工作，但它不符合标准。另一方面，使用表格也不太好。 - Martijn
2
问题询问如何垂直对齐 div 内容，而不是 td 内容。 - a coder
0

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

您可以使用Firefox中的Firebug插件来调试此类CSS问题！

-2

尝试使用line-height:100px

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接