html - Bootstrap progressbar -- 无论进度如何，都使文本居中

Question

正如您在下面的屏幕截图中看到的，文本位于进度条当前进度的中间。 有没有办法让这个文本“重叠”进度，将它分开，并且在整个宽度上居中，并且进度会显示在后面？

这会是这样的:

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