时间戳

首页 > 解决方案 > 将进度条引导程序 4（居中值）与按钮对齐

html - 将进度条引导程序 4（居中值）与按钮对齐

问题描述

一段时间以来，我一直在努力将 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 个小提琴：

按钮对齐

以价值为中心

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

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

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

演示小提琴

推荐阅读