我试图在另一个 div 中垂直对齐一个 div。出现问题是因为两者都有百分比高度。这是我的 jsfiddle:http://jsfiddle.net/QeF23/1/
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
#outerdiv {
height: 50%;
width: 100%;
background-color: #000000;
}
#innerdiv {
height: 90%;
background-color: red;
float: right;
}
如果我不想要百分比高度,这将很容易解决。
我尝试过使用 display: table-cell 方法,但没有成功。可能是我实现错误。
任何帮助,非常感谢。
最佳答案
你的 JS fiddle 看起来是正确的——如果你想在中间对齐它,可以尝试添加
#outerdiv {
height: 50%;
width: 100%;
background-color: #000000;
position:absolute;
top:25%;
}
编辑——如果你想让红色的 div 居中于黑色——使用相同的原则:
#outerdiv {
height: 50%;
width: 100%;
background-color: #000000;
position:absolute;
top:25%;
}
#innerdiv {;
position:absolute;
width: 100%;
top:5%;
height: 90%;
background-color: red;
}
关于html - 垂直对齐百分比 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15627272/