css边缘似乎是指身体而不是父母？

我有以下HTML结构：css边缘似乎是指身体而不是父母？

<div class="slide active" id="sli-0-1"> 
    <div class="mediaWrapper" id="musWrapper"> 
     <div class="albumWrapper" id="albumWrap-1"> 
      . . . 
     </div> 
    </div> 
</div>

对于整个代码，请参阅this jsFiddle

因为我设置的子div的高度到90％，以弥补总量的10％垂直边际，我预计div将在其父分区内垂直居中。正如你所看到的，情况并非如此。我不知道为什么 - 以前从未遇到过这样的问题，出于某种原因，我无法为我的生活弄清楚可能因为这种行为。尝试使用填充而不是高度相同的边距 - 无需更改。试图只设置margin-top到5％和height到90 - 没有变化。

这很可能是由我的一些愚蠢的错误造成的，在这种情况下我会提前道歉。如果没有，如果有人愿意向我解释这一点，我将不胜感激。

谢谢。

来源

2014-05-11 slagjoeyoco

这是因为基于百分比margin-top值是相对于宽度而不是高度。如果水平调整窗口大小，您会注意到这一点 - 请参阅相对于宽度的边距变化？

Box Model - 8.3 Margin properties

百分率的计算相对于所生成的框的包含块的宽度。请注意，'margin-top'和'margin-bottom'也是如此。如果包含块的宽度取决于这个元素，那么结果布局在CSS 2.1中是未定义的。

作为解决方法，您可以绝对定位元素并添加top: 5%以进行垂直居中。

Updated Example

div.albumWrapper { 
    background: transparent; 
    border: 1px solid #a00000; 
    margin: 0 2%; 
    width: 96%; 
    height: 90%; 
    z-index: 20; 
    position: absolute; 
    top: 5%; 
}

来源

2014-05-11 18:57:43

哇这很奇怪 - 它只是我，还是这只是规范的一个方面，根本没有意义呢？：] 什么可能是一个可能的解释，为什么它是这样定义的？无论如何，你的解决方法很好地完成了这项工作 - 至少'位置'以任何人都能理解的方式工作...... – slagjoeyoco

@slagjoeyoco除了规范之外，我没有任何解释。它*看起来很奇怪，但我确信有一些场景会让你真正期待这种行为。 –

非常感谢你 - 是的，这种看似“奇怪”的行为在某些特殊情况下可能会有意义。在这种常见的情况下似乎意外... – slagjoeyoco

您可以通过添加此行与您打算在div的CSS居中DIV它影响

#id{margin: 0 auto;}

那将围绕你的DIV窗口

来源

2014-05-11 19:34:30 DonFidelis

css边缘似乎是指身体而不是父母？

回答

相关问题