Bootstrap 进度条 -- 无论进度如何，让文本居中

Question

如下所示的屏幕截图中，文本位于进度条当前进度的中心。 是否有一种方法可以使这个文本'重叠'进度条，分离它，并且在整个宽度的中心，而进度条则显示在后面？

这将类似于： 用于4个进度条的代码可在此处（常规文档）找到。

我没有发布自己的代码，因为我没有任何代码来重新创建我想要的内容。

- Paramone

---

将一个 div 放置在进度条 div 中，然后设置：position:absolute;text-align:center;line-height:=height-progressbar。 - kollein

答案在下面，@kollein。 - isherwood

正如您所看到的，.progress-bar 内部的任何标记都将被脚本替换。http://fiddle.jshell.net/zyruaqeu/1/ 我认为您需要修改 Bootstrap 核心。 - isherwood

Answer 1

你可以通过在进度条标题外部包装另一个div来实现，如下面的代码片段所示：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

body {
  padding: 20px 0 0;
}

.progress {
  position: relative;
}

.progress-bar-title {
  position: absolute;
  text-align: center;
  line-height: 20px; /* line-height should be equal to bar height */
  overflow: hidden;
  color: #fff;
  right: 0;
  left: 0;
  top: 0;
}

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

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
  <div class="progress-bar-title">Progress Bar Title Goes Here</div>
</div>

- Mohammad Usman

---

看起来很漂亮，让我试试，我会更新评论的 ;) - Paramone

“top;” 可以被移除，因为它在没有它的情况下也可以工作，并且会出现一种错误，期望在其后输入一个数字。然而，它完美地工作。非常感谢！ - Paramone

@Paramone 没关系，其实我想写 top: 0，但不小心发了一个不完整的帖子。无论如何，在这两种情况下都可以正常工作 :) - Mohammad Usman

仍然适用于Bootstrap4.4，现在默认进度条的css为line-height: 1rem;。 - lookbadgers

Answer 2

请添加一个如下的DIV：

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
  <div style="position:absolute;text-align:center;">60%</div>
</div>

- kollein

---

让我看一下它。 - Paramone

你在class属性上放错了，应该是style，所以它无法工作。 - Drew Kennedy

@DrewKennedy 是的，我在复制时将其更改为Style，但它仍然无法工作...可惜。 - Paramone

请注意：<DIV> 等同于 <div class="progress"> 中的 <div class="progress-bar">。 - kollein