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邊緣似乎是指身體而不是父母？

回答

相關問題