使用按钮

Question

我一直在努力将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%;}

两个示例之间只有一个更改；在第二篇文章中，我在“ span”项中添加了“ justify-content-center position-absolute w-75”类，以将值居中，但这会使按钮按下。

我创建了2个小提琴：

Button Aligned

Value Centered

请问有关如何同时获得这两种东西的任何想法？

Answer 1

只需将vertical-align: middle;添加到.progress-bar-size。您需要执行此操作，因为您的元素是inline-flex。

Demo Fiddle