css - 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同样。这应该有效。