垂直居中按钮

Question

我试图将包含<button> 的<form> 标记居中

我的视图是什么样的：

• <p> 标签和 '' 在 flex 中。
• <p> 标签垂直居中对齐
• 按钮位于底部

我尝试了什么：

• class="align-middle" 在<form>

我知道我可以设置像素下边距，但这似乎是一种草率的编码方式，因为如果我想稍后添加或删除<p>，我将不得不回来重新调整边距

---

<div class="d-flex align-items-center">
    <p>some random text placeholder</p>

    <form class="align-items-center" asp-controller="Dashboard" asp-action="Remove" asp-route-ParticipantId="@mmLeagueParticipant.child.ParticipantId" method="POST">
        <button class="btn btn-outline-danger mt-5 bg-light">remove</button>
    </form>
</div>

使用引导程序 4.6

Answer 1

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-v4-rtl/4.6.0-2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex justify-content-center align-items-center">
    <span class="d-flex align-items-center">some random text placeholder</span>

    <form class="" asp-controller="Dashboard" asp-action="Remove" asp-route-ParticipantId="@mmLeagueParticipant.child.ParticipantId" method="POST">
        <button class="btn btn-outline-danger bg-light">remove</button>
    </form>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-v4-rtl/4.6.0-2/js/bootstrap.min.js"></script>