html - 将文本与另一个 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%' 居中，并且外部 div 的 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以确保内部div相对于它定位您需要position: absolute在内部div设置，并将其设置为 0，并将其top设置为100%leftwidthheight

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>​​​​​​​​​​​​​​​​​​

工作小提琴

Answer 3

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