我的印象是,在另一个 div 中包含的 div 上使用 % 或 auto 作为边距时,位置将根据父 div 进行计算。
如果我有一个 div,height: 50%
,margin-top: 25%
和 margin-bottom: 25%
框应在父 div 内垂直居中。
当我这样做时,尽管 div 位于页面中心而不是父 div。
CSS
div#header {
width: 100%;
height: 100px;
margin: 0px;
position: fixed;
}
div#leftnavigation {
height: 50%;
margin-top: 25%;
margin-bottom: 25%;
float: left;
}
和 HTML
<!--Title and navigation bar-->
<div id='header'>
<!--Left navigation container-->
<div id='leftnavigation'>
<p>efwfwgwegwegweg</p>
</div>
</div>
在我的例子中,还有其他 div float 到上面详述的那个 div 的右侧,但它们中的任何一个都以相同的方式运行。我假设我在做一些愚蠢的事情,但我已经解决了所有我能找到的其他问题,但仍然无法弄清楚。
编辑
这是要求的 JSFiddle http://jsfiddle.net/ChtVv/
更新
我已经尝试删除边距限制并将 leftnavigation div 设置为 height: 100%
,这是可行的,所以问题出在 margin 属性上?
最佳答案
它不起作用的原因是边距百分比是父级宽度的百分比,而不是其高度。您可以使用 margin-top: 25px; 来说明这一点; margin-bottom: 25px;
,并在 jsFiddle 中增加右侧面板的宽度。
In all cases % (percentage) is a valid value, but needs to be used with care; such values are calculated as a proportion of the parent element’s width, and careless provision of values might have unintended consequences.
关于css - 使用自动边距或 % 在父 div 中定位一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17123480/