Come centrare i pulsanti in Twitter Bootstrap 3?

Sto creando un modulo in Twitter Bootstrap ma sto riscontrando problemi con la centratura del pulsante sotto l'input nel modulo. Ho già provato ad applicare la center-blockclasse al pulsante ma non ha funzionato. Come devo risolvere questo?

Ecco il mio codice

<!-- 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>

Avvolgi il pulsante in div con la classe "text-center".

Basta cambiare questo:

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

A questa:

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

modificare

A partire da BootstrapV4 , è center-blockstato abbandonato # 19102 a favore dim-*-auto

Secondo la documentazione Bootstrap di Twitter: 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>

Tutto ciò che la classe center-blockfa è dire all'elemento di avere un margine di 0 auto, l'auto essendo i margini sinistro / destro. Tuttavia, a meno che la classe text-center o css text-align: center; è impostato sul genitore, l'elemento non conosce il punto da cui calcolare questo calcolo automatico, quindi non si centrerà come previsto.

Vedi un esempio del codice qui sopra: https://jsfiddle.net/Seany84/2j9pxt1z/

<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>

aggiungi al tuo stile:

display: tabella; margine: 0 auto;

<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>

Puoi farlo dando margine o posizionando assolutamente quegli elementi.

Per esempio

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

0px sarà dall'alto e dal basso e l'auto sarà da sinistra e destra.

Ho provato il seguente codice e ha funzionato per me.

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

Il controllo del pulsante è in un div e l'utilizzo della classe di bootstrap a blocco centrale mi ha aiutato ad allineare il pulsante al centro del div

Controlla il link dove troverai la classe del blocco centrale

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

usa la text-align: centerproprietà css

Aggiornamento per Bootstrap 4:

Avvolgi il pulsante con un div set con le classi di utilità "d-flex" e "justify-content-center" per sfruttare 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>

Il vantaggio dell'utilizzo di flexbox è la possibilità di aggiungere elementi / pulsanti aggiuntivi sullo stesso asse, ma con un proprio allineamento separato. Inoltre apre la possibilità di allineamento verticale anche con le classi 'align-items-start / center / end'.

È possibile avvolgere l'etichetta e il pulsante con un altro div per mantenerli allineati tra loro.

ad es. https://codepen.io/anon/pen/BJoeRY?editors=1000

Puoi fare quanto segue. Evita anche la sovrapposizione dei pulsanti.

<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>

Funziona per me provare a fare un indipendente, <div>quindi metterlo buttonin quello. proprio come questo :

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

Quindi vai alla tua CSSpagina Stile e fai Text-align:centercosì:

#contactBtn{text-align: center;}

Per Bootstrap 3

dividiamo lo spazio con le colonne, usiamo 8 piccole colonne (col-xs-8), lasciamo 4 colonne vuote (col-xs-offset-4) e applichiamo la proprietà (blocco centrale)

<!--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>

Per Bootstrap 4

Usiamo Spaziatura, Bootstrap include una vasta gamma di classi di utilità con margine di risposta abbreviato e imbottito per modificare l'aspetto di un elemento. Le classi vengono denominate utilizzando il formato {proprietà} {side} - {dimensione} per xs e {proprietà} {side} - {punto di interruzione} - {dimensione} per sm, md, lg e xl.

maggiori informazioni qui: 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>

Ho avuto questo problema ero solito

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

Sul mio div contenente alcune linee h3, un paio di linee h4 e un pulsante Bootstrap. Tutto tranne il pulsante è saltato al centro dopo aver usato il text-center, quindi sono entrato nel mio foglio CSS ignorando Bootstrap e ho dato al pulsante un

margin: auto;

che sembra aver risolto il problema.

oppure puoi fornire offset specifici per posizionare i pulsanti dove vuoi semplicemente con il sistema a griglia bootstrap,

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

in questo modo, consente anche di specificare la dimensione del pulsante se si imposta btn-block. certo, questo funzionerà solo nell'intervallo di dimensioni medie, se vuoi impostare anche altre dimensioni, usa xs, sm, lg.