百分比和CSS利潤率

我有創造的jsfiddle來證明我的問題：百分比和CSS利潤率

http://jsfiddle.net/MXt8d/1/

.outer { 
    display: inline-block; 
    vertical-align: top; 
    overflow: visible; 
    position: relative; 
    width: 100%; 
    height: 100%; 
    background: red; 
} 

.inner { 
    overflow: hidden; 
    height: 50%; 
    width: 100%; 
    margin-top: 25%; 
    margin-bottom: 25%; 
    background: blue; 
    opacity: 0.7; 
    color: white; 
} 

<div class="outer"> 
    <div class="inner"></div> 
</div>

的事情是，當我需要水平居中內的另一個股利。我以百分比（例如50％）指定內部div的高度，然後指定餘下的（例如（100 - 50）/ 2 = 25％）的邊距頂部和邊距底部。

但是，正如你在jsFiddle中看到的那樣，它不能按預期工作。

從父項目計算邊距，但對我來說這是不可能的，因爲我沒有權限訪問div的父項，因爲元素樣式對象通過knockout.js綁定到對象，並不像那樣簡單顯示在jsFiddle中。

希望有人可以幫助我:-)

bj99

更新：

剛剛發現爲什麼這是實際發生的事情，所以我會在這裏發佈了類似的問題peaple：

從http://www.w3.org/TR/CSS2/box.html#propdef-margin-top：

'邊距'， '下邊距' 百分比：指包含塊

而不是到寬度如我因子評分到高度： -/

來源

2013-01-14 beatjunky99

要#inner元件：

1）添加position:absolute

2）拆下margin-top種margin-bottom性能

3）添加top:25%

這就是它！

來源

2013-01-14 14:04:27

非常感謝:-) – beatjunky99

據說這是您的疑難問題的解決方案希望我幫你

.inner { 
    overflow: hidden; 
    height: 50%; 
    width: 100%; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    position: absolute; 
    margin: auto; 
    background: blue; 
    opacity: 0.7; 
    color: white; 
}

來源

2013-01-14 14:04:28

非常感謝:-) – beatjunky99

有您的問題，不同的解決方案：

1）內部元件上添加position:absolute和top:25% - Example

2）在內部元件上使用display:table，在內部元件上使用display:table-cell，這也允許垂直c進入。 - Example

每個解決方案都有一些注意事項，我個人儘量避免絕對定位，但這也取決於個人偏好。

來源

2013-01-14 14:10:56 Christoph

非常感謝，絕對定位是唯一的方法，因爲我不能改變html來添加包裝： - / – beatjunky99

百分比和CSS利潤率

回答

相關問題