垂直居中按钮

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>

使用 bootstrap 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>

垂直居中按钮

vertically center a button

css

bootstrap-4

margin

vertical-alignment