Блог

Главная - Вопросы по программированию - Как мне центрировать 2 кнопки блокировки с помощью встроенного css?

Как мне центрировать 2 кнопки блокировки с помощью встроенного css?

#html #css #bootstrap-4

Вопрос:

У меня возникли проблемы с центрированием 2 кнопок блоков с помощью встроенного css, используя темную тему из начальной загрузки. Я не могу точно отредактировать css. Я могу делать только встроенный css, потому что я использую cdn-версию темы.

             <a href='/start'><button class="btn btn-lg btn-primary" type="button">rbutton1</button>
            <a href='/stop'><button class="btn btn-lg btn-primary" 
type="button">rbutton2</button>```

Like i mentioned, i can only do inline css since its a cdn based theme.

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

1. Вам нужно будет добавить некоторые стили к родительской ( оболочке ) этих 2 кнопок . Проверьте bootstrap и flex ( bootstrap использует flex ) о том, как центрировать элементы на странице

2. как я уже упоминал, я использую версию cdn

3. И ? вы можете добавлять встроенные стили, насколько я понял. Так где же задержка ?

Ответ №1:

Если вы можете добавить тег стиля на эту страницу, и он не будет удален, вы можете это сделать.

 <style>
 a  {width:500px;display:block;margin:0 auto;}
</style>

Ответ №2:

Для этого вы также можете использовать flex.

 <!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  </head>

  <body>

    <div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
      <a href='/start'><button class="btn btn-lg btn-primary" type="button">rbutton1</button>
      <a href='/stop'><button class="btn btn-lg btn-primary" type="button">rbutton2</button>
    </div>

  </body>

</html>

Div с style="display: flex; flex-direction: column; justify-content: center; align-items: center;" выровняет обе кнопки по центру.

Ответ №3:

Прежде всего, почему для использования button внутри a тега просто добавьте класс непосредственно в a тег и text-center класс в родительский элемент. или вы можете сделать то же самое с button тегом

     <div class="text-center">
        <a href="/start" class="btn btn-lg btn-primary">rbutton1</a>
        <a href="/stop" class="btn btn-lg btn-primary">rbutton2</a>
    </div>

но в теге кнопки вы не можете добавить href="" атрибут

 <div class="text-center">
    <button class="btn btn-lg btn-primary " type="button">rbutton1</button>
    <button class="btn btn-lg btn-primary" type="button">rbutton2</button>
</div>
Метки: