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%”居中，并且在 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>

您需要在外部div 上设置position: relative 以确保内部div 相对于它定位 您需要在内部div上设置position: absolute，并将其top和left设置为0，并且它是 width 和 height 到 100%

此外，您在第二个 div

中遗漏了 style="