Intento usar una barra de progreso de Bootstrap para mostrar el texto. la barra de progreso funciona bien, pero el texto no está centrado en toda la barra de progreso. Justo centrado en el área gris. Si la barra de progreso comienza a llenarse, el texto se está moviendo hacia la derecha. ¿Cómo puedo solucionar que el texto quede centrado? Lo uso de esta manera:

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

Si actualizo el texto lo uso de esta manera:

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

¿Alguna idea de lo que hago mal aquí? Yo uso Bootstrap vom CDN: https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js