How can I add label inside a progress bar tag?

Question

I want to add a label in my progress bar tag like in this beautiful example:

Assuming the blue is the value and the red is the max, how can I add a label inside there like my "35"?

Answer 1

Use CSS's position:relative to manoeuvre the text onto the bar.

A quick and dirty solution for a short bar is:

position: relative;
left: -100px;

where left forces the text that would be next to the bar on top of it.

In the comments, Matthias made the point that left doesn't work if the progress bar is 100% width.

It doesn't work because it forces the text below the bar. It'll fail for any width of bar sufficient to force the text below.

Instead you have to get a bit more clever and do something like:

    position: relative;
    top: -1.5em;
    margin-left: 50%;

Here the top:-1.5em replaces the left adjustment in the jsFiddle. The margin-left is an attempt to centre the text. It should actually be a little less than 50%.

If someone has a better solution to centre the text on the bar that's less hacky than the hand-wavy 50%ish margin feel free to comment on it and I'll adjust this again.