2

我希望以下 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 顶部对齐的结果。

小提琴

我究竟做错了什么？为什么不vertical-align:middle工作？

4

2 回答 2

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在这里

于 2013-01-12T08:15:15.563 回答
2

vertical-align 属性影响由行内元素生成的框的行框内的垂直定位。这里有更多细节！

于 2013-01-12T08:14:10.510 回答