Css 进度条中的文本需要重新定位

你好，我不是html和css方面的专家。我在python中使用django，我想显示一些数据。我用两个数字做这个酒吧。 我打错了号码：75

我的英语不是很好，所以我不能提供更多的细节，但我提供了一些代码来获得这个想法

感谢阅读并理解我：）

。进度{
背景图像：线性梯度（45度，rgba（255，255，255，0.15）25%，透明25%，透明50%，rgba（255，255，255，0.15）50%，rgba（255，255，255，0.15）75%，透明75%，透明）；
背景色：#00f！重要；
颜色：#fff；
背景尺寸：1rem1rem；
显示：-ms flexbox；
显示器：flex；
高度：1公厘；
溢出：隐藏；
字体大小：0.703125rem；
边界半径：50px；
位置：相对位置；
}
.bg成功{
背景色：#5eba00！重要；
}
.进度条带条纹{
背景图像：线性梯度（45度，rgba（255，255，255，0.15）25%，透明25%，透明50%，rgba（255，255，255，0.15）50%，rgba（255，255，255，0.15）75%，透明75%，透明）；
背景尺寸：1rem1rem；
}
.进度条{
显示：-ms flexbox；
显示器：flex；
-ms-flex方向：列；
弯曲方向：立柱；
证明内容：中心；
颜色：#fff；
文本对齐：居中；
空白：nowrap；
背景色：#467fcf；
过渡：宽度0.6s；
}

75
25

确保在Django中使用几乎相同的模板创建两个div

。进度{
背景图像：线性梯度（45度，rgba（255，255，255，0.15）25%，透明25%，透明50%，rgba（255，255，255，0.15）50%，rgba（255，255，255，0.15）75%，透明75%，透明）；
背景色：#00f！重要；
颜色：#fff；
背景尺寸：1rem1rem；
显示：-ms flexbox；
显示器：flex；
高度：1公厘；
溢出：隐藏；
字体大小：0.703125rem；
边界半径：50px；
位置：相对位置；
}
.bg成功{
背景色：#5eba00！重要；
}
.进度条带条纹{
背景图像：线性梯度（45度，rgba（255，255，255，0.15）25%，透明25%，透明50%，rgba（255，255，255，0.15）50%，rgba（255，255，255，0.15）75%，透明75%，透明）；
背景尺寸：1rem1rem；
}
.进度条{
显示：-ms flexbox；
显示器：flex；
-ms-flex方向：列；
弯曲方向：立柱；
证明内容：中心；
颜色：#fff；
文本对齐：居中；
空白：nowrap；
背景色：#467fcf；
过渡：宽度0.6s；
}

25
75

切勿将div标签放在span标签内

<td>
  <div class="progress">
    <div class="progress-bar bg-success progress-bar-striped" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100">
      <span class="sr-only">25</span>
    </div>

    <div class="progress-bar bg-error progress-bar-striped" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100">
      <span class="sr-only">75</span>
    </div>
  </div>
</td>

---

没问题，很高兴我能帮忙：）

.progress {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-color: #00f !important;
  color: #fff;
  background-size: 1rem 1rem;
  display: -ms-flexbox;
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.703125rem;
  border-radius: 50px;
  position: relative;
}
.bg-success {
  background-color: #5eba00 !important;
}
.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}
.progress-bar {
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #467fcf;
  transition: width 0.6s ease;
  flex-basis: 25%;
}

.progress-bar.bg-error {
  flex-basis: 75%;
}