¿Cómo centrar botones en Twitter Bootstrap 3?
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-block
clase 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>
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-block
se eliminó el número 19102 a favor dem-*-auto
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-block
es 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/