Я уже некоторое время пытаюсь выровнять индикатор выполнения Bootstrap с помощью кнопки.
Я хочу, чтобы кнопка на правой стороне была выровнена, а значение для прогресса было отцентрировано, но я не могу получить оба одновременно. Посмотреть 2 результата я получаю:
Код для первого:
PHP:
<div class="col-6 progress-container">
<div class="d-inline-flex progress progress-bar-size m-2">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width:25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<span class="text-dark ml-1"><strong>25%</strong></span>
</div>
</div>
<div class="d-inline-flex">
<form class="form-group" action="action.php" method="post" enctype="multipart/form-data">
<input class="btn btn-sm btn-success" type="submit" value="Update">
</form>
</div>
</div>
CSS:
.progress-container { margin-left: auto; margin-right:auto;}
.progress-bar-size{ height: 25px; width: 75%;}
Есть только одно изменение между обоими примерами; Во втором я добавил классы "justify-content-center position-absolute w-75" к элементу "span", чтобы центрировать значение, но это приводит к нажатию кнопки.
Я создал 2 скрипки:
Кнопка выровнена
Значение по центру
Есть идеи, как получить обе вещи, пожалуйста?