CSS`vertical-align:middle`不起作用?

时间:2013-01-12 08:11:53

标签: html css

我希望下面的html文档会在黄色方块中垂直居中显示红色正方形:

<html>
<body>

<div style="width:200px;height:200px;background-color:yellow">

    <div style="width:100px;height:100px;background-color:red;vertical-align:middle">

    </div>

</div>

</body>
</html>

但它导致一个与其父div的顶部对齐。

fiddle

我做错了什么?为什么vertical-align:middle没有工作?

2 个答案:

答案 0 :(得分:2)

vertical-align属性会影响由内联级元素生成的框的线框内的垂直位置。 Here are more details!

答案 1 :(得分:2)

<div style="display: table-cell; width:200px;height:200px;background-color:yellow; vertical-align:middle">
    <div style="width:100px;height:100px;background-color:red;">
    </div>
</div>

jsFiddle here