uib-progressbar text as center align

Question

Is there a way we can centre aligned text of uib-progressbar. I have tried doing position:absolute. But I wanted to show list of progress bar in a UI grid viz. is a scrollable content. While scrolling text remain at its place but progress bar get scroll properly.

Template

<uib-progressbar animate="false" value="30">
    <span class="content">30% (3/10)</span>
</uib-progressbar>

Style

.progress-bar .content {
   white-space: nowrap;
   position: absolute;
   left: 23vh; /* will vary according to alignment */
}

Answer 1

Can you provide your css class 'content' here?

However, assuming that you wanted the text "30% (3/10)" to be centered on progress-bar irrespective of the value.

Add css class to your progress-bar like below:

.progress {
       position: relative;
    }

.progress span {
    position: absolute;
    display: block;
    width: 100%;
    color: black;
 }

and your code should be like this:

<uib-progressbar animate="false" value="30" class="progress">
    <span class="content">30% (3/10)</span>
</uib-progressbar>

I have created a JSBin for same. This should work.