垂直居中按钮

我正在尝试将包含 <form><button> 标签居中

我的视图是什么样子:

  • <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

hailangliu365 回答:垂直居中按钮

<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>

本文链接:https://www.f2er.com/3771.html

大家都在问