尽管在他身后改变宽度div，如何在div的中间绝对设置文本（CSS）？

Question

图像显示了我想要完成的任务：

这是我的代码： http://jsfiddle.net/ZNtKj/202/

<div style="width: 200px" >
 <div class="niveles-porcentaje">
     <div class="alta" style="width: 40%"> <span class="porcentaje">40%</span></div>
 </div>

我难以解决的风格：

div.niveles-porcentaje {
    width:100%;
    height:100%;
    align-self:center;
    text-align:center;
    display:inline-table;
    background-color:#D7D7D7;

}
div.alta {
    display:inline-table; /*inside a table*/
    line-height: 2em;
    background-color: #06AC09;
    height:100%;
    float:left;

}
 span.porcentaje{
    text-align:center;
    vertical-align:middle;
    z-index:99;
}

div将在td内。

Answer 1

您必须使文本的父级全宽。要做到这一点，请从width div中删除背面颜色和.alta定义，并创建一个内部绝对div来处理颜色填充，这不会对文本造成干扰。

另外，请记住将文本span设置为display: block为全宽。点击此处：http://jsfiddle.net/ZNtKj/209/

 <div style="width: 200px" >
     <div class="niveles-porcentaje">
         <div class="alta">
             <div class="fill" style="width: 40%"></div>
             <span class="porcentaje">40%</span>
         </div>
     </div>
</div>

CSS：

div.niveles-porcentaje {
    width:100%;
    height:100%;
    align-self:center;
    text-align:center;
    display:inline-table;
    background-color:#D7D7D7;

}
div.alta {
    display:inline-table; /*inside a table*/
    line-height: 2em;
    height:100%;
    width: 100%;
    position: relative; 
}

div.alta .fill {
    background-color: #06AC09;
    height:100%;
    position: absolute;
}
 span.porcentaje{
    text-align:center;
    vertical-align:middle;
    z-index:99;
    position: relative;
    display: block;
}

Answer 2

以下是Fiddle示例。您只需更改文本div宽度即可查看结果。

    div.niveles-porcentaje {
        width:100%;
        height:20px;
        align-self:center;
        text-align:center;
        background-color:#D7D7D7;
    position:relative;

    }
    div.alta {
        line-height: 2em;
        background-color: #06AC09;
        height:20px;
        float:left;
        position:relative;    

    }
     span.porcentaje{
         position:absolute;
         left:46%;
         top:0;
    }