Как центрировать кнопки в Twitter Bootstrap 3?

Ответ 1

Оберните кнопку в div с классом "text-center".

Просто измените это:

<!-- wrong -->
<div class="col-md-4 center-block">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>

К этому:

<!-- correct -->
<div class="col-md-4 text-center"> 
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button> 
</div>

редактировать

Начиная с BootstrapV4, center-block был удален # 19102 в пользу m-*-auto

Ответ 2

Согласно документации Twitter Bootstrap: http://getbootstrap.com/css/#helper-classes-center

<!-- Button -->
<div class="form-group">
   <label class="col-md-4 control-label" for="singlebutton"></label>
   <div class="col-md-4 center-block">
      <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
          Next Step!
       </button>
   </div>  
</div>

Весь класс center-block заключается в том, чтобы указать элементу, имеющему маркер 0 auto, причем авто является левым/правым полям. Однако, если класс text-center или css text-align: center; установлен на родительском элементе, элемент не знает, что нужно для вычисления этого автоматического вычисления, поэтому не будет центрировать себя так, как ожидалось.

См. пример приведенного выше кода: https://jsfiddle.net/Seany84/2j9pxt1z/

Ответ 3

<div class="row">
  <div class="col-sm-12">
    <div class="text-center">
      <button class="btn btn-primary" id="singlebutton"> Next Step!</button>
    </div>
  </div>
</div>

Ответ 4

<div class="container-fluid">
   <div class="col-sm-12 text-center">
       <button class="btn btn-primary" title="Submit"></button>
       <button class="btn btn-warning" title="Cancel"></button>
   </div>
</div>

Ответ 5

добавить в свой стиль:

display: table; margin: 0 auto;

Ответ 6

Я попробовал следующий код, и это сработало для меня.

<button class="btn btn-default center-block" type="submit">Button</button>

Элемент управления кнопками находится в div, и использование стартового класса с центральным блоком помогло мне выровнять кнопку в центр div

Проверьте ссылку, в которой вы найдете класс центрального блока

http://getbootstrap.com/css/#helper-classes-center

Ответ 7

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

Например

.button{
  margin:0px auto; //it will center them 
}

0px будет сверху и снизу, а авто будет слева и справа.

Ответ 8

использовать text-align: center свойство css

Ответ 9

Обновление для Bootstrap 4:

Оберните кнопку с помощью набора div с классами "d-flex" и "justify-content-center", чтобы воспользоваться преимуществами flexbox.

<!-- Button -->
<div class="form-group">
  <div class="d-flex justify-content-center">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">
      Next Step!
    </button>
  </div>
</div>

Преимущество использования flexbox заключается в возможности добавления дополнительных элементов/кнопок на одну и ту же ось, но с их отдельным выравниванием. Это также открывает возможность вертикального выравнивания с классами "align-items-start/center/end".

Вы можете обернуть ярлык и кнопку с помощью другого div, чтобы они совпадали друг с другом.

например https://codepen.io/anon/pen/BJoeRY?editors=1000

Ответ 10

Вы можете сделать следующее. Он также позволяет избежать перекрытия кнопок.

<div class="center-block" style="max-width:400px">
  <a href="#" class="btn btn-success">Accept</a>
  <a href="#" class="btn btn-danger"> Reject</a>
</div>

Ответ 11

Это работает для меня попробуйте сделать независимый <div>, а затем вставьте button в это. просто так:

<div id="contactBtn">
            <button type="submit" class="btn btn-primary ">Send</button>
</div>

Затем перейдите на страницу CSS Style и выполните Text-align:center следующим образом:

#contactBtn{text-align: center;}

Ответ 12

Для Bootstrap 3

мы разделим пространство на столбцы, мы используем 8 маленьких столбцов (col-xs-8), оставляем 4 пустых столбца (col-xs-offset-4) и применяем свойство (center-block)

<!--Footer-->
<div class="modal-footer">
  <div class="col-xs-8 col-xs-offset-4 center-block">
    <button type="submit" class="btn btn-primary">Enviar</button>
    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
    </div>
</div>

Для Bootstrap 4

Мы используем Spacing, Bootstrap включает в себя широкий диапазон сокращенных и дополненных классов полезности маргинальных откликов для изменения внешнего вида элемента. Классы называются с использованием формата {property} {sides} - {size} для xs и {property} {sides} - {breakpoint} - {size} для sm, md, lg и xl.

подробнее здесь: https://getbootstrap.com/docs/4.1/utilities/spacing/

<!--Footer-->
<div class="modal-footer">
  <button type="submit" class="btn btn-primary ml-auto">Enviar</button>
  <button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>

Ответ 13

У меня была эта проблема. я использовал

<div class = "col-xs-8 text-center">

На моем div, содержащем несколько строк h3, пару строк h4 и кнопку Bootstrap. Все, кроме кнопки, переместилось в центр после того, как я использовал text-center, поэтому я вошел в свой CSS-лист, переопределяющий Bootstrap, и дал кнопке

margin: auto;

который, кажется, решил проблему.

Ответ 14

<div class="col-md-6 offset-md-6">
        <p></p>
        <input type="button" value="Load More..." class="btn btn-primary">
</div>

Ответ 15

или вы можете дать конкретные смещения, чтобы сделать положение кнопки, где вы хотите просто с помощью системы начальной загрузки,

<div class="col-md-offset-4 col-md-2 col-md-offset-5">
<input type="submit" class="btn btn-block" value="submit"/>

таким образом, вы также можете указать размер кнопки, если вы установите btn-block. конечно, это будет работать только в диапазоне размеров md, если вы хотите установить другие размеры, используйте xs, sm, lg.