Twitter Bootstrap：进度条居中文本答案

【问题标题】：Twitter Bootstrap: Center Text on Progress BarTwitter Bootstrap：进度条居中文本
【发布时间】：2012-10-07 21:31:45
【问题描述】：

我一直在使用 Twitter 的引导程序，我希望进度条上的文本以 on 栏为中心，无论值如何。

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

截图：

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

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

【问题讨论】：

标签： css twitter-bootstrap progress-bar centering

【解决方案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 现在支持进度条中 span 元素内的文本。 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。

将其粘贴到另一个样式表中/在您加载引导程序的 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%;
}

然后通过在.bar之外添加span元素来将文本添加到进度条：

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

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

【讨论】：

感谢您提供详细信息。小修正。即使对于引导程序 3，您也应该拥有“.progress { position: relative; }”。如果没有这个，如果你的进度条在一个 div 中，它不会尊重 div 的宽度。 (1)without progress position relative jsbin (2)with progress position relative jsbin
谢谢，阿米尔。我会将其添加到解释中。
bootstrap 2 的示例仅在我将 span 放在 div[class=bar] 之前才有效。否则，跨度会根据填充的百分比向右推。
以及文字颜色的解决方案stackoverflow.com/questions/8820200/…
我刚刚用 bootstrap 4.5 试过这个，我发现我需要将 mt-2 添加到类属性，否则文本不会居中。

【解决方案2】：

Bootstrap 3 答案，如引导示例所示

<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>

【讨论】：

此代码将文本在栏内居中，而不是根据整个进度条。（这就是问题）我已经用 Bootstrap 3 示例更新了我的答案，供任何好奇的人使用。
是的。您的 bootstrap 3 答案看起来更好。