html - div 中的中心文本，其中有一个 div

Question

我有这个代码:

<div style="border:1px solid #afafaf;background-color:#efefef;width:100px;height:14px;">
    <div style="text-align:center;width:50px;height:14px;background-color:green;">
        50%
    </div>
</div>

如果第一个 DIV 和第二个 div 的宽度可能为 0 到 100 像素(进度条)，我如何将 50% 放在中间

Answer 1

Live Demo

• 我将 position: relative 添加到您的外部 div。
• 我添加了一个新的文本 div，它绝对位于进度条上方。
• 参见 http://css-tricks.com/absolute-positioning-inside-relative-positioning/

无论您的进度条有什么宽度，它都不会影响文本 div。

HTML:

<div style="border:1px solid #afafaf;background-color:#efefef;width:100px;height:14px;position:relative">
    <div style="text-align:center;width:50px;height:14px;background-color:green;"></div>
    <div id="text">50%</div>
</div>

CSS:

#text {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center
}