时间戳

首页 > 解决方案 > 垂直居中按钮

css - 垂直居中按钮

问题描述

我试图将<form>包含<button>

我的视图是什么样的：

我尝试了什么：

我知道我可以设置像素底部边距，但这似乎是一种草率的编码方式，因为如果我想稍后添加或删除，<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

标签： cssbootstrap-4marginvertical-alignment

解决方案

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

推荐阅读