How can I center the <form> tag containing the <button>?
This is what my View looks like:
- The
<p>tag and the '' are displayed in a flex layout. - The
<p>tag is vertically aligned in the center. - The button is positioned at the bottom of the form.
Here's what I've tried:
- Adding
class="align-middle"to the<form>tag.
I'm aware that setting a pixel-based bottom margin may work, but it feels like a messy solution as it would require readjusting if elements within the <p> tag were added or removed later.
<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 is being used for styling.