將文本對齊以另一個div作爲百分比背景的中心

Question

情境：我有一個div，它的父級寬度爲100％。有這個div中的文本需要居中/

也在該div中我有另一個元素應該有一個百分比的外部divs寬度，它是0到100％（這個區域將有一個背景彩色套裝）。

代碼可能看起來像：

<div style="text-align:center; width:100%;">40% 
    <div style="background-color: green; width:40%;"></div> 
</div> 

所以我希望文字'40％」爲中心和外格的40％左將有綠色的背景顏色。

我在做什麼錯？

謝謝。

Answer 1

<div style="text-align:center; width:100%;position: relative;">40% 
    <div style="background-color: green; width:40%;position: absolute;top: 0px;left: 0px; height: 100%;"></div> 
</div> 

需要設置position: relative在外div以確保它 需要設置position: absolute在內div使內div相對定位，並且將其設置爲top和left設置爲0，並將其設置爲width和height至100％

而且，你在第二div

Answer 2

<div style="text-align:center; width:100%;">40% 
    <div style="background-color: green; width:40%; margin:0 auto;">40%</div> 
</div>​​​​​​​​​​​​​​​​​​ 

Working Fiddle

Answer 3

<div style="text-align:center; width:100%;">40% 
<div style="background-color: green; width:40%;"></div> 
</div>