html - CSS:div 的垂直对齐不起作用

Question

我一直在尝试垂直对齐 div 容器的内容；因为这是我第一次使用此代码，所以我创建了一个新文件来测试它，但它根本不起作用。我尝试在不同的浏览器(Firefox、Opera 和 Chrome)中测试它，但没有一个能按预期工作。作为引用，我尝试使用以下示例来调试我的代码 - http://www.w3.org/Style/Examples/007/center.en.html

请有这方面经验的人帮帮忙。

这是我的代码:HTML:

<div style="width: 50%; height: 10%; text-align: center; display: table cell; vertical-      align: middle; background-color: #87ceff; margin: 0px auto;min-height: 10%;">
some text
<p>Some paragraph</p>
</div>

Answer 1

如您所见:http://jsfiddle.net/thd4P/2/它有效。

<div style="width: 50%; height: 300px; text-align: center; display: table-cell; vertical-align: middle; background-color: #87ceff; margin: 0px auto;min-height: 100px;">
    some text
    <p>Some paragraph</p>
</div>

我所做的是更正您的语法并将高度设置为 px 而不是百分比。