¿Cómo centrar botones en Twitter Bootstrap 3?

Resuelto Sam Bates asked hace 10 años • 14 respuestas

Estoy creando un formulario en Twitter Bootstrap pero tengo problemas para centrar el botón debajo de la entrada en el formulario. Ya intenté aplicar la center-blockclase al botón pero no funcionó. ¿Cómo debería solucionar esto?

Aquí está mi código.

<!-- Button -->
<div class="form-group">
    <label class="col-md-4 control-label" for="singlebutton"></label>
    <div class="col-md-4">
        <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
            Next Step!
        </button>
    </div>
</div>
Sam Bates avatar Mar 22 '14 21:03 Sam Bates
Aceptado

Envuelva el botón en div con la clase "centro de texto".

Solo cambia esto:

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

A esto:

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

Editar

A partir de BootstrapV4 , center-blockse eliminó el número 19102 a favor dem-*-auto

Shekhar Pankaj avatar Mar 22 '2014 14:03 Shekhar Pankaj

Según la documentación de 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>

Todo lo que hace la clase center-blockes decirle al elemento que tenga un margen de 0 automático, siendo el automático los márgenes izquierdo/derecho. Sin embargo, a menos que la clase text-center o css text-align:center; está configurado en el elemento principal, el elemento no conoce el punto desde el cual realizar este cálculo automático, por lo que no se centrará como se anticipó.

Vea un ejemplo del código anterior aquí: https://jsfiddle.net/Seany84/2j9pxt1z/

Seany84 avatar Mar 22 '2014 14:03 Seany84