-1

我的印象是，当使用 % 或 auto 作为另一个 div 中包含的 div 的边距时，位置将相对于父 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 漂浮在上面详述的右侧，但其中任何一个的行为方式相同。我假设我在做一些愚蠢的事情，但我已经解决了所有其他我可以找到的问题，但仍然无法弄清楚。

编辑
这是请求的 JSFiddle http://jsfiddle.net/ChtVv/

更新
我已经尝试删除边距约束并将leftnavigation div设置为height: 100%，这有效，所以问题出在边距属性上？

4

3 回答 3

2

它不起作用的原因是百分比边距是父级宽度的百分比，而不是它的高度。您可以通过使用margin-top: 25px; margin-bottom: 25px;，也可以通过增加 jsFiddle 中右侧面板的宽度来判断这一点。

在所有情况下，%（百分比）都是有效值，但需要小心使用；这些值被计算为父元素宽度的比例，粗心地提供值可能会产生意想不到的后果。

W3 参考

于 2013-06-15T13:13:47.417 回答
0

CSS是棘手的！:D

这是一种垂直和水平居中的借用技术，但它会涉及更改您的 HTML 和 CSS。我不确定您的代码有多灵活：

CSS：

#outer {width: 100%; border: 3px solid red;}
#middle {width: 100%; text-align: center;border: 3px solid green;}
#inner {width: 200px; margin-left: auto; margin-right: auto; text-align: left;border: 3px solid blue;}

/* Courtesy: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */

HTML

<!--Title and navigation bar-->
<div id='outer'>
    <!--Left navigation container-->
    <div id='middle'>
        <p id="inner">efwfwgwegwegweg</p>
    </div>
</div>

您可以在此基础上实现您所追求的一切！

小提琴：http: //jsfiddle.net/pratik136/ChtVv/2/

于 2013-06-15T12:47:02.927 回答
0

好的，所以有很多原因导致这不起作用。

主要原因是你的容器有position:fixed;

添加position:fixed;到元素时，它不再在 DOM 中保留它的空间，也不会包含它的子元素。

我举了一个例子（在我看来）让你的孩子在垂直和水平方向上居中

这是一个演示。

演示

这是代码。

<div id="container">
    <div id="child"></div>
</div>

#container{
    width:100%;
    height:500px;
    background:#CCC;
    margin:0;
}

#child{
    width:50%;
    height:50%;
    background:#EEE;
    position:relative;
    top:25%;
    left:25%;
}
于 2013-06-15T12:50:59.893 回答