Come centrare un pulsante di larghezza sconosciuta nell'intervallo di bootstrap?

Question

Ho un pulsante generato da backbone.js e jQuery.tmpl() e la larghezza del pulsante è variante. Voglio metterlo in un div span6. Il codice è mostrato di seguito:

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

Non so come rendere il pulsante centrato nel div.

Answer 1

Im nessun guru CSS, ma questo fa il trucco per me (centra il pulsante all'interno del span6):

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

Maggiori informazioni sul centraggio can be found here.

Answer 2

Un po 'in ritardo, ma è possibile utilizzare la classe di impaginazione centrato dal bootstrap

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

Answer 3

Che dire <a> tag?

Se si dispone di un pulsante di <a> tag, quindi gli altri approcci non funzionerà, come a.btn ha un attributo float: left nella sorgente di bootstrap.

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

Questo può essere annullato in 2 modi.

Soluzione 1

Aggiungi meno un costume di file e l'importazione di bootstrap.

bootstrap-custom.less

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

e quindi compilare meno la vostra abitudine di file, o semplicemente specificarlo in un altro file CSS:

styles.css

a.btn { 
    float: none !important; 
} 

Soluzione 2

Basta farlo in linea con style="float: none;":

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

Answer 4

Altro Solution

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

Answer 5

Ho avuto questo stesso problema, ho avvolto il in

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

E'

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