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

现场演示

• 我加入position: relative你的外部div.
• 我添加了一个新的文本div,它绝对位于进度条上.
• 见http://css-tricks.com/absolute-positioning-inside-relative-positioning/

无论width您的进度条是什么,它都不会影响文本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
}