uib-progressbar文本作为中心对齐

Question

我们是否可以将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 */
}

Answer 1

你能在这里提供你的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。 这应该有用。