Bootstrap Progressbar文本标签问题

Question

我尝试使用Bootstrap进度条在上显示文本。进度条运行良好，但文本不是以整个进度条为中心。就在灰色区域的中心。如果进度条开始填充，则文本将向右移动。如何解决文本保持居中的问题？我是这样使用的：

<div class="progress" style="height: 30px">
<div
id="theprogressbar"
class="progress-bar progress-bar-striped bg-success"
role="progressbar"
style="width: 0%; transition: none"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
></div>
<div id="theprogressbartext" class="d-flex justify-content-center align-items-center h-100 w-100">0/0</div>
</div>

如果我更新文本，我会这样使用：

function setProgressBar(percent, text) {
$("#theprogressbar").attr("style", "width:" + percent + "%");
$("#theprogressbar").attr("aria-valuenow", percent);
$("#theprogressbartext").html(text);
}

知道我在这里做错了什么吗？我使用Bootstrap vom CDN：https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js

Answer 1

对于所有对技巧感兴趣的人：

<div class="progress position-relative" style="height: 30px">
<div
id="theprogressbar"
class="progress-bar progress-bar-striped bg-success"
role="progressbar"
style="width: 0%; transition: none"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
></div>
<div
id="theprogressbartext"
class="d-flex justify-content-center align-items-center position-absolute h-100 w-100"
>
0/0
</div>
</div>