Centra una colonna usando Twitter Bootstrap

Come faccio a centrare un div di una dimensione di colonna all’interno del contenitore (12 colonne) in Twitter Bootstrap 3.

Si prega di vedere il violino di avviamento.

 

Quindi, voglio un div , con una class centered per essere centrata all’interno del contenitore. Potrei usare una riga se ci sono più div, ma per ora voglio solo un div con la dimensione di una colonna centrata all’interno del contenitore (12 colonne).

Inoltre, non sono sicuro che l’approccio sopra sia abbastanza buono in quanto l’intenzione non è quella di compensare il div della metà. Non ho bisogno di spazi liberi al di fuori del div e il contenuto del div shrink in proporzione. Voglio svuotare lo spazio al di fuori del div per essere equamente distribuito (riduci fino alla larghezza del contenitore == una colonna).

Ci sono due approcci per centrare una colonna

in Bootstrap 3:

Approccio 1 (offset):

Il primo approccio utilizza le proprie classi di offset di Bootstrap, quindi non richiede modifiche nel markup e nessun CSS aggiuntivo. La chiave è di impostare un offset pari alla metà della dimensione rimanente della riga . Ad esempio, una colonna di dimensione 2 verrebbe centrata aggiungendo un offset di 5, ovvero (12-2)/2 .

Nel markup questo sarebbe simile a:

 

Ora, c’è un inconveniente ovvio per questo metodo, funziona solo per le dimensioni di colonne pari , quindi solo .col-X-2 , .col-X-4 , col-X-6 , col-X-8 e col-X-10 sono supportati.


Approccio 2 (il vecchio margine: auto)

Puoi centrare qualsiasi dimensione di colonna usando il margin: 0 auto; provato margin: 0 auto; tecnica, devi solo occuparti del floating che viene aggiunto dal sistema di griglia di Bootstrap. Raccomando di definire una class CSS personalizzata come la seguente:

 .col-centered{ float: none; margin: 0 auto; } 

Ora puoi aggiungerlo a qualsiasi dimensione di colonna a qualsiasi dimensione dello schermo e funzionerà perfettamente con il layout reattivo di Bootstrap:

 

Nota: con entrambe le tecniche è ansible saltare l’elemento .row e avere la colonna centrata all’interno di un contenitore .container Tuttavia si noterà una differenza minima nella dimensione effettiva della colonna a causa del riempimento nella class del contenitore.


Aggiornare:

Poiché v3.0.1 Bootstrap ha una class integrata denominata center-block che usa margin: 0 auto ma manca float:none . Puoi aggiungerlo al tuo CSS per farlo funzionare con il sistema di griglia.

Il metodo preferito per centrare le colonne è usare “offset” (es .: col-md-offset-3 )

Bootstrap 3.x Esempi di centratura

Per gli elementi di centraggio , esiste una class helper del center-block .

Puoi anche usare text-center per centrare il testo (e gli elementi in linea).

Demo : http://bootply.com/91632

MODIFICA – Come menzionato nei commenti, il center-block funziona sul contenuto della colonna e display:block elementi di display:block , ma non funzionerà sulla colonna stessa ( col-* div) perché Bootstrap utilizza float .


Aggiornamento 2018

Ora con Bootstrap 4 , i metodi di centraggio sono cambiati ..

  • text-center è ancora utilizzato per la display:inline elementi in display:inline
  • mx-auto sostituisce il display:block centro a centro display:block elementi di display:block
  • offset-* o mx-auto può essere utilizzato per centrare le colonne della griglia

mx-auto (margini dell’asse x automatico) centrerà il display:block o display:flex elementi display:flex che hanno una larghezza definita , ( % , vw , px , ecc.). Flexbox è usato di default sulle colonne della griglia, quindi ci sono anche vari metodi di centraggio del flexbox.

Demo Bootstrap 4 Centering orizzontale

Per il centraggio verticale in BS4, consultare https://stackoverflow.com/a/41464397/171456

Ora Bootstrap 3.1.1 funziona con .center-block e questa class helper funziona con il sistema di colonne.

Centro di supporto per Bootstrap 3 Helper .

Si prega di controllare questa DEMO jsfiddle :

 
row center-block
1 center-block
2 center-block
row col-xs-2 col-center-block

Centro classi assistenti

Centrare il centro della colonna usando la class helper col-center-block .

 .col-center-block { float: none; display: block; margin: 0 auto; /* margin-left: auto; margin-right: auto; */ } 

Semplicemente aggiungilo al tuo file CSS personalizzato, la modifica dei file CSS di Bootstrap direttamente non è raccomandata e annulla la tua capacità di usare un cdn.

 .center-block { float: none !important } 

Perché?

Bootstrap CSS (Ver 3.7 e versioni precedenti) utilizza: margin: 0 auto; , ma viene sovrascritto dalla proprietà float del contenitore della dimensione.

PS : Dopo aver aggiunto questa class, non dimenticare di impostare le classi con l’ordine corretto.

 
Example

Bootstrap 3 ora ha una class integrata per questo .center-block

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

Se stai ancora usando 2.X, aggiungilo al tuo CSS.

Il mio approccio alle colonne centrali consiste nell’utilizzare la display: inline-block per colonne e text-align: center per il contenitore padre.

Devi solo aggiungere la class CSS ‘centrata’ alla row .

HTML:

 
Col 1
Col 2
Col 3

CSS:

 .centered { text-align: center; font-size: 0; } .centered > div { float: none; display: inline-block; text-align: left; font-size: 13px; } 

JSfiddle: http://jsfiddle.net/steyffi/ug4fzcjd/

Bootstrap versione 3 ha una class .text-center.

Basta aggiungere questa class:

 text-center 

Caricherà semplicemente questo stile:

 .text-center { text-align: center; } 

Esempio:

 
Bootstrap 4 is coming....

Questo funziona. Probabilmente un modo hackish, ma funziona bene. È stato testato per reattivo (Y).

 .centered { background-color: teal; text-align: center; } 

Desktop

di risposta

Puoi usare text-center per la riga e assicurarti che le div interne abbiano una display:inline-block (con non float )

come:

 
A red block
A white block
A yellow block

e css:

 .redBlock { width: 100px; height: 100px; background-color: aqua; display: inline-block } .whiteBlock { width: 100px; height: 100px; background-color: white; display: inline-block } .yellowBlock { width: 100px; height: 100px; background-color: yellow; display: inline-block } 

Il violino: http://jsfiddle.net/DTcHh/3177/

Basta impostare la tua colonna che visualizza il contenuto in col-xs-12 (mobile-first 😉 e configurare il contenitore solo per controllare quanto ampio vuoi che sia il tuo contenuto centrato, quindi:

 .container { background-color: blue; } .centered { background-color: red; } 
  

Per centrare la colonna, dobbiamo usare il codice seguente. i cols sono elementi floater oltre al margine automatico. Lo imposterai anche per non farlo galleggiare,

  

Per centrare il sopra col-lg-1 con la class centrata, scriveremo:

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

Per centrare il contenuto all’interno del div, utilizzare text-align:center ,

 .centered { text-align: center; } 

Se si desidera centrarlo solo sul desktop e su uno schermo più grande, non su cellulare, quindi utilizzare la seguente query multimediale.

 @media (min-width: 768px) { .centered { float: none; margin-left: auto; margin-right: auto; } } 

E per centrare il div solo sulla versione mobile, usa il codice seguente.

 @media (max-width: 768px) { .centered { float: none; margin-left: auto; margin-right: auto; } } 

Questa probabilmente non è la risposta migliore, ma c’è ancora una soluzione creativa a questo. Come sottolineato da koala_dev, la correzione della colonna funziona solo per le dimensioni di colonna pari. Tuttavia, annidando le righe è ansible ottenere anche colonne di centraggio irregolari.

Attenersi alla domanda originale in cui si desidera centrare una colonna di 1 all’interno di una griglia di 12.

  1. Centra una colonna di 2 compensandola 5
  2. Crea una riga nidificata, in modo da ottenere un nuovo 12 colonne all’interno delle 2 colonne.
  3. Dato che vuoi centrare una colonna di 1 e 1 è “metà” di 2 (ciò che abbiamo centrato nel passaggio 1), ora devi centrare una colonna di 6 nella tua riga annidata, operazione che può essere facilmente eseguita compensandola 3.

Per esempio:

 
centered column with that has an "original width" of 1 col

Vedi questo violino , per favore nota che devi aumentare la dimensione della finestra di output per vedere anche il risultato, altrimenti le colonne si avvolgeranno.

Un altro approccio di compensazione consiste nell’avere due righe vuote, ad esempio:

 
Centered Content
 

Possiamo ottenere questo risultato utilizzando il meccanismo di layout della tabella:

Il meccanismo è:

  1. Avvolgi tutte le colonne in un div.
  2. Crea quel div come un tavolo con un layout fisso.
  3. Rendi ogni colonna come una cella di tabella.
  4. Usa la proprietà allineamento verticale per controllare la posizione del contenuto.

La demo di esempio è qui

Inserisci qui la descrizione dell'immagine

Come koala_dev ha usato nel suo approccio 1, preferirei il metodo offset invece del blocco centrale o dei margini che ha un uso limitato, ma come ha menzionato:

Ora, c’è un inconveniente ovvio per questo metodo, funziona solo per le dimensioni di colonne pari, quindi solo .col-X-2, .col-X-4, col-X-6, col-X-8 e col-X- 10 sono supportati.

Questo può essere risolto utilizzando il seguente approccio per le colonne dispari.

 
// Your content here

Puoi utilizzare la soluzione flessibile flessibile Flexbox sul tuo Bootstrap.

 justify-content: center; 

puoi centrare la tua colonna.

Controlla flex .

Con Bootstrap v4, questo può essere ottenuto semplicemente aggiungendo .justify-content-center al .row

 
centered 1 column

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

Poiché non ho mai avuto la necessità di centrare solo un singolo .col- all’interno di un .row , ho impostato la seguente class sul wrapping delle colonne target.

 .col-center > [class*="col-"] { float: none; margin-left: auto; margin-right: auto; } 

Esempio

 
Foo
Bar

Per coloro che cercano di centrare gli elementi della colonna sullo schermo quando non si ha il numero esatto per riempire la griglia, ho scritto una piccola parte di JavaScript per restituire i nomi delle classi:

 function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) { var arrayFill = function (size, content) { return Array.apply(null, Array(size)).map(String.prototype.valueOf, content); }; var elementSize = parseInt(12 / elementsPerRow, 10); var normalClassName = 'col-' + screenSize + '-' + elementSize; var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow; var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements; var ret = arrayFill(numberOfFittingElements, normalClassName); var remainingSize = 12 - numberOfRemainingElements * elementSize; var remainingLeftSize = parseInt(remainingSize / 2, 10); return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize)); } 

Se hai 5 elementi e vuoi avere 3 per riga su una schermata md , fai questo:

 colCalculator(5, 3, 'md') >> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"] 

Tieni presente che il secondo argomento deve essere divisibile per 12.

Per centrare più di una colonna in una riga Bootstrap – e il numero di colonne è dispari, basta aggiungere questa class css a tutte le colonne in quella riga:

 .many-cols-centered { // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg display:inline-block; float:none; } 

Quindi nel tuo HTML hai qualcosa del tipo:

 

You See

I love coding.

You See

I love coding.

You See

I love coding.

Questo non è il mio codice, ma funziona perfettamente (testato su Bootstrap 3) e non devo scherzare con col-offset.

demo:

 /* centered columns styles */ .row-centered { text-align: center; } .col-centered { display: inline-block; float: none; /* reset the text-align */ text-align: left; /* inline-block space fix */ margin-right: -4px; text-align: center; background-color: #ccc; border: 1px solid #ddd; } 
 
Column 6
Column 6
Column 3
Column 3
Column 3

Se lo metti sulla tua riga, tutte le colonne all’interno saranno centrate:

 .row-centered { display: flex; justify-content: space-between; } 

Prova questo

 

Puoi usare altri col come col-md-2 , ecc.

Per essere più precisi, il sistema di griglia di Bootstrap contiene 12 colonne e per centrare qualsiasi contenuto diciamo, ad esempio, il contenuto occupa una colonna. Uno dovrà occupare due colonne della griglia di Bootstrap e posizionare il contenuto su metà delle due colonne occupate.

 
... your content / data will come here ...

‘col-xs-offset-5’ sta dicendo al sistema della griglia dove iniziare a posizionare il contenuto.

‘col-xs-2’ sta dicendo al sistema a griglia quante colonne di sinistra devono occupare il contenuto.

‘centrato’ sarà una class definita che centrerà il contenuto.

Ecco come appare questo esempio nel sistema di griglia di Bootstrap.

colonne:

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

……. offset …….. dati. …….non usato……..

Prova questo codice.

  

Qui ho usato col-lg-1, e l’offset dovrebbe essere 10 per centrare correttamente il div su dispositivi di grandi dimensioni, se ne hai bisogno per centrare su mediam su dispositivo di grandi dimensioni, basta cambiare il lg in md e così via, fammi sapere se qualche problema.

Non dimenticare di aggiungere !important . Quindi puoi essere sicuro che quell’elemento sarà davvero al centro:

 .col-centered{ float: none !important; margin: 0 auto !important; } 

Metodo 1:

 
YOUR CONTENT

Metodo 2:

CSS

 .float-center{float: none;} 
YOUR CONTENT

Suggerimenti Bootstrap, esempi e strumenti: OnAirCode

Suggerisco semplicemente di usare la class text-center :