¿Cómo centrar un botón de ancho desconocido en el lapso de un arranque?

Question

Tengo un botón generado por backbone.js y jQuery.tmpl() y el ancho del botón es una variante. Quiero ponerlo en un span6 div. El código se muestra a continuación:

<div class="row"> 
    <div class="span6"> 
    <button class="btn primary large"> 
     BLABLABLA 
    </button> 
    </div> 
    <div class="span10"> 
    ... 
    </div> 
</div> 

No sé cómo hacer que el botón se centre en el div.

Answer 1

Im ningún gurú CSS, pero esto hace el truco para mí (se centra en el botón dentro del span6):

<div class="row"> 
    <div class="span6" style="text-align:center"> 
    <button class="btn primary large"> 
     BLABLABLA 
    </button> 
    </div> 
</div> 

Más información sobre el centrado can be found here.

Answer 2

Un poco tarde pero se puede utilizar la clase de paginación centrado de arranque

<div class="span6 pagination-centered"> 
    <button class="btn primary large"> 
    BLABLABLA 
    </button> 
</div> 

Answer 3

¿Qué hay de <a> etiquetas?

Si tiene un botón de etiqueta <a>, entonces los otros enfoques no funcionarán, ya que a.btn tiene un atributo float: left en la fuente de arranque.

<div style="text-align: center;"> 
    <a href="#" class="btn">Button text</a> 
</div> 

Esto se puede deshacer de 2 maneras.

Solución 1

Añadir una costumbre menos de archivos de arranque y de importación.

de arranque-custom.less

@import "bootstrap.less"; 
a.btn { 
    float: none !important; 
} 

Y luego compilar su costumbre de menos de archivos, o simplemente especificarlo en otro archivo CSS:

styles.css

a.btn { 
    float: none !important; 
} 

Solución 2

Simplemente lo hacen en línea usando style="float: none;":

<div style="text-align: center;"> 
    <a href="#" class="btn" style="float: none;">Button text</a> 
</div> 

Answer 4

Otra Solución

<div class="row-fluid pagination-centered"> 
<a href="#" class="btn btn-large">Button</a> 
    </div> 
<div class="clearfix"></div> 

Answer 5

tuve esta misma edición, envolví la de

<a class="btn btn-primary" href="#" role="button">Text Here</a> 

Se convirtió en

<div class="text-center"> 
<a class="btn btn-primary" href="#" role="button">Text Here</a> 
</div>