我希望下面的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
没有工作?
答案 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