Come centrare un div con Bootstrap2?

84

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>

numeri di span e offset modificati ...

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

Voglio solo un riquadro di 6 colonne centrato ...

modificare:

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 offset2dà imbottitura extra a sinistra span7 offset3imbottitura extra a destra ...

css twitter-bootstrap twitter-bootstrap-2

— Alex
fonte

Stai cercando di centrare una casella orizzontalmente sulla pagina? Poiché la containerclasse lo fa già, ho pensato che potresti cercare di centrare una scatola più piccola. O stai cercando di centrare una casella sia orizzontalmente che verticalmente sulla pagina?

— Andres Ilich

14

una cosa da scatola che dici? . . . .Qui nel mondo degli sviluppatori lo chiamiamo div

— pythonian29033

Quale versione di Bootstrap stavi utilizzando? dovrebbe riflettersi nel titolo poiché le persone che lo cercano finiranno qui e vedranno codice obsoleto.

— JGallardo

46

Oltre riducendo il div stesso per le dimensioni desiderate, riducendo le dimensioni campata in questo modo ... class="span6 offset3", class="span4 offset4"ecc ... qualcosa di semplice come style="text-align: center"il 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)

— csturtz
fonte

12

Considera la risposta di Zuhaib Ali. text-align: center non funziona per centrare gli elementi all'interno di un <div>. La classe offset * non è veramente centrata sui componenti. Sta semplicemente creando l'illusione della centratura. Puoi verificarlo ridimensionando la finestra e vedendo che i componenti non rimangono centrati. Quando applichi il metodo di Zuhaib Ali, i componenti rimangono centrati.

— BigSauce

Invece di aggiungere uno stile in linea (style = "text-align: center"), aggiungi la classe "center-block" e ottieni contenuti centrati all'interno del tuo div centrato.

— Shawn Taylor

col-md-4 o col-lg-4 è uguale a un margine: 0 auto; ?

— jruzafa

165

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 !importantma non è raccomandato.

— Zuhaib Ali
fonte

5

SÌ! Grazie Zuhaib! Ha funzionato perfettamente. Questa risposta dovrebbe essere votata come la risposta corretta per questa domanda.

— BigSauce

@ZuhaibAli Aggiunta di float: none;risolvere il mio problema.

— SIFE

1

Sto usando Rails, quindi voglio solo sottolineare che in application.css, aggiungi *= require bootstrap.min prima *= require_self e*= require_tree

2

Questo non ha funzionato per me, ma l'aggiunta display: tablesembrava risolverlo

— Peter Berg il

1

Bella risposta! Lavorare con questo da ora in poi.

— serv-bot 22

34

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

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

Documentazione qui .

— Casey
fonte

20

Se si desidera eseguire il bootstrap completo (e non il modo auto sinistra / destra) è necessario un modello che si adatti a 12 colonne, ad esempio 2 spazi, 8 contenuti, 2 spazi. Questo è ciò che farà questa configurazione. Copre solo le varianti -md- , tendo a farla scattare a grandezza naturale per piccoli aggiungendo col-xs-12

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

— brama
fonte

è un modo valido per centrare i div in boostrap?

— Gavindra Kalikapersaud

1

Il contenuto del div non è centrato, ma lo è il div stesso.

— Craig

8

Sembra che tu volessi solo centrare l'allineamento di un singolo contenitore. Il framework bootstrap potrebbe essere troppo complicato per questo esempio, potresti avere semplicemente un div autonomo con il tuo stile, qualcosa come:

<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 .containerdiv bootstrap .

— cstrat
fonte

3

aggiungi il contenuto del centro della classe

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

— mrpix
fonte

0

@ZuhaibAli il codice 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.

— jakson
fonte

0

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

Uso .center-block

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

— core114
fonte

0

avvolgere il div in un div genitore con la classe rowquindi aggiungere lo stile margin:0 auto;al div

<div class="row">
  <div style="margin: 0 auto;">center</div>
</div>

— Mahmoud Farahat
fonte