html - 将进度条 Bootstrap 4(居中值)与按钮对齐

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%;}

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

我创建了 2 个 fiddle :

Button Aligned

Value Centered

请问关于如何获得这两样东西有什么想法吗？

Answer 1

只需添加 vertical-align: middle; 到 .progress-bar-size。您需要这样做，因为您的元素是 inline-flex。

Demo Fiddle