CODEWITHSUNDEEP
cssbootstrap-4marginvertical-alignment
jgrewal
jgrewal

Reputation: 342

vertically center a button

Im trying to center the <form> tag that contains the <button>

what my View looks like:

what I tried:

I know I could set pixel bottom margin but that seems like a sloppy way to code it since if i wanted to later add or remove to the <p> I would have to come back and re-adjust the margin

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

using bootstrap 4.6

Upvotes: 0

Views: 77

Answers (1)

rozhan
rozhan

Reputation: 341

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

Upvotes: 2

Related Questions