将文本与div中心对齐，将另一个div作为百分比背景

Question

情况：我的div是其父级的100％宽度。这个div中有文本需要居中/

同样在该div中我有另一个元素应该具有外部div宽度的百分比，是0到100％（该区域将具有背景颜色集）。

代码可能类似于：

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

所以我希望文本'40％'居中，并且在左边40％的外部div将具有绿色背景颜色。

我做错了什么？

感谢。

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，以确保内部div相对于其定位 您需要在内部position: absolute上设置div，并将其设置为top和left为0，并将width和height设置为100 ％

此外，您在第二个style="

中遗漏了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>