Bootstrap进度条 - 无论进度如何都以文本为中心

Question

正如您在下面的屏幕截图中看到的那样，文本位于进度条的中间位置。目前的进展。 有没有办法使这个文字“重叠＆＃39;进展，分离，以整个宽度为中心，进度会落后吗？

这将是这样的：

找到用于4个进度条的代码here. (regular docs)

我没有张贴自己的代码，因为我没有任何代码可以重新创建我想要的代码。

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>

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>