html - テキストを div の中央に配置し、別の div をパーセンテージ背景として配置する

Question

状況: 親の 100% 幅の div があります。このdivには、中央に配置する必要があるテキストがあります/

また、その div 内には、0 から 100% の外側の div 幅のパーセンテージを持つ別の要素があります (この領域には背景色が設定されます)。

コードは次のようになります。

<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に、外側に設定する必要があります。内側に設定し、andを 0 に設定し、 andを 100%に設定する必要があります。divdivposition: absolutedivtopleftwidthheight

また、style="2 番目の を省略しました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>