Twitter Bootstrap：进度条上的居中文本

Question

我一直在使用 Twitter 的 bootstrap，我希望进度条上的文本能够在 on bar 上居中，无论其值如何。

下面的链接是我现在拥有的。 我希望所有文本都与最底部的栏对齐。

截图：

我已经尽力使用纯CSS，并且尽可能避免使用JS，但如果这是最干净的方法，我愿意接受它。

<div class="progress">
    <div class="bar" style="width: 86%">517/600</div>
</div>

Answer 1

引导5：（与v4x相同）

<div class="progress position-relative">
    <div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
    <small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
</div>

---

带有实用程序类的 Bootstrap 4：（感谢 MaPePeR 的添加）

<div class="progress position-relative">
    <div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
    <small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
</div>

---

引导程序3：

Bootstrap 现在支持进度栏中跨度元素内的文本。 Bootstrap 示例中提供的 HTML。 （注意班级

sr-only

已被删除）

HTML：

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span>60% Complete</span>
    </div>
</div>

...但是它只是根据栏本身将文本居中，因此我们需要一些自定义 CSS。

将其粘贴到另一个样式表/下面加载 bootstrap 的 css 的位置：

CSS：

/**
 * Progress bars with centered text
 */

.progress {
    position: relative;
}

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

JsBin 文件： http://jsbin.com/IBOwEPog/1/edit

---

引导程序2：

将其粘贴到另一个样式表/下面加载 Bootstrap CSS 的位置：

/**
 * Progress bars with centered text
 */
.progress {
    position: relative;
}

.progress .bar {
    z-index: 1;
    position: absolute;
}

.progress span {
    position: absolute;
    top: 0;
    z-index: 2;
    color: black; /* Change according to needs */
    text-align: center;
    width: 100%;
}

然后通过在

span

外部添加

.bar

元素将文本添加到进度栏：

<div class="progress">
    <div class="bar" style="width: 50%"></div>
    <span>Add your text here</span>
</div>

JsBin：http://jsbin.com/apufux/2/edit

Answer 2

Bootstrap 3答案，如bootstrap示例所示

<div class="progress text-center">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span>60% Complete</span>
  </div>
    <span>40% Left</span>
</div>

Answer 3

在 Bootstrap 5 中使用变换和绝对定位居中的进度条，此处仅使用 CSS。

您不必在显示进度的文本上应用背景颜色和颜色，但在许多情况下它更具可读性，因为它可以确保进度条在进度条文本的背景中移动时的对比度。也可以使用Aria。

 <div class="progress" style="height: 30px; position: relative;">
            <div class="progress-bar-striped bg-success progress-bar-animated"
                role="progressbar progressbar-striped progressbar-striped-animated" style="width: 80%;"
                aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
            <span class="progress-text"
                style="font-size:1.2em; position: absolute; width: 100%; text-align: center; left: 0; top: 50%; transform: translateY(-50%);"><span
                    style="background-color:black;color:white;border-radius:4px;">80%</span></span>
        </div>