将进度条的值放在中心，随着它的增长

Question

我有一个进度条：

出于某些原因，我似乎可以将价值移到中心。

.progressBar {
  border: black solid 1px;
  text-align: center;
}

#progressBarText {
  text-align: center;
}


<div class="progress progressBar" style="background-color: blue;" width="50%">
  <div class="progress-bar" role="progressbar" id="progressBarText" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100">
    50%
  </div>
</div>

它似乎没有生效。

问题

如何继续进行调试？

我现在对任何建议持开放态度。

任何提示/建议/帮助都将非常感谢！

Answer 1

这样做：

#progressBarText {
     text-align: center;
     width:  100%;
}

Answer 2

你班上的

.progress-bar 添加此

width: 50%;

Answer 3

为班级进度条编写CSS