Come centrare un div con Bootstrap 2?

Question

http://twitter.github.com/bootstrap/scaffolding.html

Ho provato come tutte le combinazioni:

<div class="row">
  <div class="span7 offset5"> box </div>
</div>

o

<div class="container">
  <div class="row">
    <div class="span7 offset5"> box </div>
  </div>  
</div>

ha modificato i numeri di span e offset ...

Ma non riesco a ottenere un semplice riquadro perfettamente centrato su una pagina :(

Voglio solo un riquadro di 6 colonne centrato ...

---

modifica:

l'ha fatto con

<div class="container">
  <div class="row" id="login-container">
    <div class="span8 offset2">
       box
    </div>
  </div>
</div>

Ma la scatola è troppo larga, c'è un modo per farlo con span7?

span7 offset2 fornisce un riempimento extra a sinistra span7 offset3 imbottitura extra a destra ...

Answer 1

oltre a ridurre il div stesso alla dimensione desiderata, riducendo la dimensione dello span in questo modo ... class="span6 offset3", class="span4 offset4", ecc ... qualcosa di semplice come style="text-align: center" sul div potrebbe avere l'effetto che stai cercando

non è possibile utilizzare span7 con un offset impostato e ottenere lo span centrato sulla pagina (poiché gli span totali= 12)

Answer 2

Gli intervalli di Bootstrap vengono spostati a sinistra.Tutto ciò che serve per centrarli è ignorare questo comportamento.Lo faccio aggiungendo questo al mio foglio di stile:

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

Se hai definito questa classe, aggiungila allo span e sei a posto.

<div class="span7 center"> box </div>

Nota che questa classe centrale personalizzata deve essere definita dopo il bootstrap css.Potresti usare !important ma non è raccomandato.

Answer 3

Bootstrap3 ha la classe .center-block che puoi usare.È definito come

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Documentazione qui .

Answer 4

Se vuoi eseguire il bootstrap completo (e non il modo auto sinistro / destro) hai bisogno di un modello che si adatti a 12 colonne, ad es.2 spazi vuoti, 8 contenuti, 2 spazi vuoti.Questo è ciò che farà questa configurazione. Copre solo le varianti -md- , tendo a renderlo a grandezza naturale per piccolo aggiungendo col-xs-12

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>

Answer 5

Sembra che tu volessi solo allineare al centro un singolo contenitore. Il framework bootstrap potrebbe essere troppo complicato per questo esempio, potresti avere semplicemente un div autonomo con il tuo stile, qualcosa del tipo:

<div class="login-container">
  <!-- Your Login Form -->
</div>

e stile:

.login-container {
  margin: 0 auto;
  width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}

Dovrebbe funzionare bene se sei annidato da qualche parte all'interno di un div bootstrap .container.

Answer 6

aggiungi i contenuti del centro della classe

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}

Answer 7

Il codice @ZuhaibAli funziona per me, ma l'ho cambiato un po ':

Ho creato una nuova classe in css

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

quindi il div diventa

<div class="center col-md-6"></div>

Ho aggiunto col-md-6 per la larghezza del div stesso che in questa situazione significava che il div è la metà delle dimensioni, ci sono 1 -12 col md nel bootstrap.

Answer 8

Segui questa guida https://getbootstrap.com/docs/3.3/css/

Utilizza .center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}