css - uib-progressbar文本为中心对齐

有没有一种方法可以使uib-progressbar的对齐文本居中。我尝试做position:absolute。但是我想在UI网格中显示进度条列表。是可滚动的内容。在滚动时，文本保留在原处，但进度条会正确滚动。

模板

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

样式

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

最佳答案

您可以在此处提供CSS类的“内容”吗？

但是，假设您希望文本“ 30％（3/10）”以进度栏为中心，而不管其值如何。

将CSS类添加到进度栏中，如下所示：

.progress {
       position: relative;
    }

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

并且您的代码应如下所示：

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

我已经为它创建了一个JSBin。
这应该工作。