Overlapping text over two center separators

Question

I am trying to change the code to do something a little different, but I cannot get it to work. This is the code:

<div id="progress-bar" class="all-rounded"> <div id="progress-bar-percentage" class="all-rounded" style="width: 88%">88/100</div> </div> 

It means:

Using this CSS:

 .all-rounded { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .spacer { display: block; } #progress-bar { width: 100px; background: #cccccc; } #progress-bar-percentage { background: #3063A5; padding: 5px 0px; color: #FFF; text-align: center; } 

As you can see, the 88/100 text is printed inside the inner progress-bar-precentage , so it is centered relative to this div, the problem with this is that the width of the progress-bar-precentage very small, the text will be out of place, my idea is is to focus it in relation to the outter div progress-bar , so it will always be in place regardless of the inner div, but I don’t know how to place the text on top and in the center, any ideas?

Answer 1

Try this: DEMO

HTML

 <div id="progress-bar" class="all-rounded"> <div id="progress-bar-percentage" class="all-rounded" style="width: 68%"><span>68/100</span></div> </div> 

CSS

 #progress-bar { width: 100px; background: #cccccc; position: relative; } #progress-bar-percentage { background: #3063A5; padding: 5px 0px; color: #FFF; text-align: center; height: 20px; } #progress-bar-percentage span { display: inline-block; position: absolute; width: 100%; left: 0; } 

Answer 2

Try something like this:

 <div id="progress-bar" class="all-rounded"> <div id="progress-bar-percentage" class="all-rounded" style="width: 88%"></div> <div id="progress-bar-text">88/100</div> </div> .all-rounded { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .spacer { display: block; } #progress-bar { width: 100px; background: #cccccc; position: relative; } #progress-bar-percentage { background: #3063A5; padding: 5px 0px; position: absolute; top: 0; left: 0; } #progress-bar-text { width: 100%; color: #FFF; text-align: center; position: absolute; top: 0; left: 0; }