Блог

Главная - Вопросы по программированию - по вертикали отцентрируйте кнопку a

по вертикали отцентрируйте кнопку a

#css #bootstrap-4 #margin #vertical-alignment

Вопрос:

Я пытаюсь центрировать <form> тег, который содержит <button>

как выглядит мой взгляд:

  • <p> метка и » находятся в гибком состоянии.
  • <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

Комментарии:

1. В начальной загрузке есть класс justify-content-center class, который вы можете применить к форме. Загрузочный документ

2. я попытался это сделать, окружив <form> <div class="justify-content-center"> его буквой «а», но это ничего не изменило. также пробовал <div class="d-flex align-items-center">

Ответ №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>

Комментарии:

1. кнопка <p> и кнопка должны находиться рядом друг с другом по горизонтали. и кнопка должна быть по центру, а не располагаться вертикально внизу.

2. на самом деле вы должны выровнять по центру p, а не кнопку, и элемент p по умолчанию получит нижнее поле, так что вы можете отступить до 0 p элемента или использовать вместо этого промежуток, а затем выровнять его по центру

Метки: