Centra una colonna usando Twitter Bootstrap 3

1146

Come posso centrare un div della dimensione di una colonna all'interno del contenitore (12 colonne) in Twitter Bootstrap 3 ?

.centered {
  background-color: red;
}
<body class="container">
  <div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
  </div>
</body>
Espandi frammento

Voglio un div, con una classe .centeredda centrare all'interno del contenitore. Potrei usare una riga se ci sono più divs, ma per ora voglio solo una divcon le dimensioni di una colonna centrata all'interno del contenitore (12 colonne).

Inoltre, non sono sicuro che l'approccio di cui sopra sia abbastanza buono poiché l'intenzione non è quella di compensare la divmetà. Non ho bisogno di spazi liberi al di fuori dive il contenuto della divriduzione in proporzione. Voglio svuotare lo spazio esterno al div per distribuire uniformemente (ridurre fino a quando la larghezza del contenitore è uguale a una colonna).

css  twitter-bootstrap  twitter-bootstrap-3  centering 
— BSR
fonte

Risposte:

1963

Esistono due approcci per centrare una colonna <div>in Bootstrap 3:

Approccio 1 (offset):

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

Nel markup questo sembrerebbe:

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

Ora, c'è un ovvio svantaggio per questo metodo. Funziona solo per dimensioni di colonna anche , soltanto .col-X-2, .col-X-4, col-X-6, col-X-8, e col-X-10sono supportati.

Approccio 2 (il vecchio margin:auto)

Puoi centrare qualsiasi dimensione di colonna usando la margin: 0 auto;tecnica collaudata . Devi solo prenderti cura del floating che viene aggiunto dal sistema a griglia di Bootstrap. Consiglio di definire una classe 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:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

Nota: con entrambe le tecniche è possibile saltare l' .rowelemento e centrare la colonna all'interno di a .container, ma si noterà una differenza minima nelle dimensioni effettive della colonna a causa del riempimento nella classe contenitore.

Aggiornare:

Poiché v3.0.1 Bootstrap ha una classe incorporata denominata center-blockche utilizza margin: 0 auto, ma manca float:none, è possibile aggiungerla al CSS per farlo funzionare con il sistema a griglia.

— koala_dev
fonte
1
penso che non ci sia float: nessuno nella regola del blocco centrale perché esiste una regola indipendente clearfix che puoi aggiungere agli elementi per cancellare i float.
— Diego Fernando Murillo Valenci,
7
@DiegoFernandoMurilloValenci .clearfixnon funzionerebbe in questo caso perché non rimuove la proprietà float sugli elementi (che è necessario centrare usando margin: 0 auto), fa semplicemente avvolgere un contenitore con gli elementi fluttuanti all'interno
— koala_dev
4
non posso usarlo su una colonna, perché nofloat:none;
— airtonix,
2
Se vuoi centrare più di una colonna in una riga, vedi questa risposta stackoverflow.com/questions/28683329/…
— Conor Svensson,
3
La sintassi per l'offset è cambiata in Bootstrap4 (dall'ultima versione). Usando questa risposta come esempio: la classe col-md-offset-5 dovrebbe ora essere offset-md-5.
— Lgants,
296

Il metodo preferito di colonne centraggio è usare "offset" (es: col-md-offset-3)

Esempi di centraggio di Bootstrap 3.x.

Per gli elementi di centraggio , esiste una center-block classe di supporto .

Puoi anche usare text-centerper centrare il testo (e gli elementi incorporati).

Demo : http://bootply.com/91632

MODIFICA - Come menzionato nei commenti,center-blockfunziona sul contenuto e suglidisplay:blockelementi dellacolonna, ma non funzionerà sulla colonna stessa (col-*div) perché Bootstrap utilizzafloat.

Aggiornamento 2018

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

  • text-centerè ancora usato per gli display:inlineelementi
  • mx-autosostituisce gli elementi center-blockcentralidisplay:block
  • offset-* o mx-auto può essere utilizzato per centrare le colonne della griglia

mx-auto(margini auto asse x) si concentreranno display:blocko display:flexelementi che hanno una larghezza definita , ( %, vw, px, ecc ..). Flexbox viene utilizzato per impostazione predefinita nelle colonne della griglia, quindi esistono anche vari metodi di centraggio del flexbox.

Demo Bootstrap 4 Centratura orizzontale

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

— Zim
fonte
31
Sfortunatamente questa classe di supporto non funziona con il sistema a colonne in quanto non si occupa della proprietà float. Vedi questa demo per esempio.
— koala_dev,
13
Ciò richiede solo un blocco centrale {float: none; } e funziona. bootply.com/122268
— Matias Vad
5
non sono sicuro dell'OP, ma sono arrivato qui cercando i text-centerdettagli - che nessuna delle altre risposte ha fornito. Questo ottiene il mio voto.
— domoarigato,
1
non posso usarlo su una colonna, perché nofloat:none;
— airtonix,
98

Ora Bootstrap 3.1.1 sta funzionando .center-blocke questa classe di supporto funziona con il sistema di colonne.

Bootstrap 3 Helper Class Center .

Si prega di controllare questa DEMO jsfiddle :

<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>

Centro classi di aiuto

Fila al centro della colonna usando la col-center-blockclasse helper.

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}
— Mittente
fonte
Ho fatto funzionare questo senza aggiungere float:noneassicurandomi che il blocco centrale div abbia lo style="width : ?px"stile applicato ad esso. Ad esempio una larghezza dell'immagine. Funziona con 3.2.2
— Piotr Kula
margine: 0 auto; - abbastanza invece margine-sinistra + margine-destra
— mmike
57

Aggiungi semplicemente quanto segue al tuo file CSS personalizzato. La modifica diretta dei file CSS Bootstrap non è consigliata e annulla la possibilità di utilizzare un CDN .

.center-block {
    float: none !important
}

Perché?

Bootstrap CSS (versione 3.7 e precedenti) utilizza margin: 0 auto; , ma viene sovrascritto dalla proprietà float del contenitore delle dimensioni.

PS :

Dopo aver aggiunto questa classe, non dimenticare di impostare le classi nell'ordine giusto.

<div class="col-md-6 center-block">Example</div>
— SEO Sagive
fonte
1
Sto usando Bootstrap 3.3.7e questo è l'unico metodo che funziona per me!
— Illagrenan,
1
questo funziona. ma non credo !importantsia necessario
— Gianfranco P.
1
@GianfrancoP. P. Il tuo diritto, ma ... dipende dall'ordine di caricamento e volevo fornire un metodo infallibile.
— Sagive SEO,
39

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

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

Se stai ancora utilizzando 2.X, aggiungi questo al tuo CSS.

— Schmalzy
fonte
questo probabilmente ti darebbe l'effetto desiderato nel modo più semplice. Lancia anche la larghezza sulla classe .centered o aggiungi una seconda classe se stai cercando un approccio più modulare
— Matt Lambert
2
Aggiunta di float: nessuna; su .centered ti consente di spostare la classe in alto nel contenitore. mantiene il codice più pulito
— Adam Patterson,
7
non posso usarlo su una colonna, perché nofloat:none;
— airtonix,
37

Il mio approccio alle colonne centrali è utilizzare display: inline-blockper le colonne e text-align: centerper il contenitore padre.

Devi solo aggiungere la classe CSS "centrata" a row.

HTML:

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

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/

— Steffi
fonte
2
Questa è l'unica risposta che ha funzionato il 100% delle volte: gli altri hanno funzionato, ma non quando bootstrap è passato alla sua vista mobile (gli elementi sono stati spostati sul lato sinistro).
— Levi Fuller,
Questo è stato l'unico che ha funzionato anche a me, .center-block funziona solo per una colonna e ho bisogno di centrare tutte le colonne indipendentemente da quante siano.
— Cjohansson,
L'unica soluzione che ha funzionato anche per me. Altri funzionavano solo quando il browser era una finestra (non a schermo intero).
— kiwicomb123,
26

Bootstrap versione 3 ha una classe .text-center.

Aggiungi questa classe:

text-center

Caricherà semplicemente questo stile:

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

Esempio:

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>
— RustyIngles
fonte
Chiarire dove verrà aggiunta questa classe?
— aksu,
Ciao @aksu, non devi aggiungere alcun .css. Guarda l'esempio fornito.
— JoshYates1980,
15

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

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

Desktop

di risposta

— Ali Gajani
fonte
funziona solo perché l'elemento ha il diplay in linea. An imgpuò essere impostato come blocco.
— ProfileTwist
Forse nel tuo caso di test isolato. Vorrei aggiungere .centered img { display: inline; }alla tua risposta e quindi sarebbe degno di un voto positivo invece.
— ProfileTwist
Nessun problema. Sono sicuro che l'OP troverà la sua risposta :)
— Ali Gajani,
in bootstrap 3, la classe .text-center fa la stessa cosa in modo nativo, come ho imparato sopra.
— domoarigato,
7 
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>
— wali
fonte
6

Per centrare la colonna, dobbiamo usare il codice qui sotto. i col sono elementi floater oltre al margine auto. Lo imposteremo anche su float none,

<body class="container">
    <div class="col-lg-1 col-md-4 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Per centrare il col-lg-1 sopra con la classe di centrato, 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 dispositivi mobili, 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, utilizzare il codice seguente.

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

Basta impostare una colonna che mostra il contenuto su col-xs-12 (mobile-first ;-) e configurare il contenitore solo per controllare la larghezza del contenuto centrato, quindi:

.container {
  background-color: blue;
}
.centered {
    background-color: red;
}
<body class="container col-xs-offset-3 col-xs-6">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
Espandi frammento

<body class="container col-xs-offset-1 col-xs-10">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
Espandi frammento

Per una demo, vedere http://codepen.io/Kebten/pen/gpRNMe :-)

— Kieran Ryan
fonte
6

Un altro approccio alla compensazione è di avere due righe vuote, ad esempio:

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>
— LeRoy
fonte
1
2 div inutili, col-md-offset- * è meglio
— ymakux,
1
Sono d'accordo. Ho usato questo metodo perché funziona davvero bene e testato.
— LeRoy,
6

Puoi usare text-centerper la riga e assicurarti che i div interni abbiano display:inline-block(con no float).

Come:

<div class="container">
    <div class="row text-center" style="background-color : black;">
        <div class="redBlock">A red block</div>
        <div class="whiteBlock">A white block</div>
        <div class="yellowBlock">A yellow block</div>
    </div>
</div>

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/

— Alireza Fattahi
fonte
6

Con bootstrap 4 puoi semplicemente provare justify-content-md-centercome è menzionato qui

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">
              1 of 3
        </div>
        <div class="col-md-auto">
            Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col">
             1 of 3
        </div>
        <div class="col-md-auto">
                Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
</div>

inserisci qui la descrizione dell'immagine

— Hossein Narimani Rad
fonte
1
@AdamErickson La domanda posta specificamente per una soluzione bootstrap 3. Poiché questa risposta è probabilmente la strada da percorrere in BS4, nel 2019 alcuni software stanno ancora usando bootstrap 3.
— A1rPun
5

Questa probabilmente non è la risposta migliore, ma c'è un'altra soluzione creativa a questo. Come sottolineato da koala_dev, l'offset della colonna funziona solo per dimensioni di colonna pari. Tuttavia, annidando le righe è possibile centrare anche le colonne irregolari.

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

  1. Centrare una colonna di 2 compensandola 5
  2. Crea una riga nidificata, in modo da ottenere nuove 12 colonne all'interno delle tue 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 nidificata, che è facilmente eseguibile compensandola 3.

Per esempio:

<div class="container">
  <div class="row">
    <div class="col-md-offset-5 col-md-2">
      <div class="row">
        <div class="col-md-offset-3 col-md-6">
          centered column with that has an "original width" of 1 col
        </div>
      </div>
    </div>
  </div>
</div>

Vedi questo violino , tieni presente che devi aumentare le dimensioni della finestra di output per vedere anche il risultato, altrimenti le colonne andranno a capo.

— Reinder
fonte
5

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

demo:

/* centered columns styles */

.col-centered {
  display: inline-block;
  float: none;
  /* inline-block space fix */
  margin-right: -4px;
  background-color: #ccc;
  border: 1px solid #ddd;
}
<div class="container">
  <div class="row text-center">
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
  </div>
</div>
Espandi frammento

— Binar Web
fonte
4

Possiamo raggiungere questo obiettivo utilizzando il meccanismo di layout della tabella:

Il meccanismo è:

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

La demo di esempio è qui

Inserisci qui la descrizione dell'immagine

— Mohan Dere
fonte
4

Aggiungi il seguente frammento all'interno di .row o .col. Questo è per Bootstrap 4 *.

d-flex justify-content-center
— Thomas Chirwa
fonte
3

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

Ora, c'è un ovvio svantaggio per questo metodo, funziona solo per colonne di dimensioni 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 usando il seguente approccio per le colonne dispari.

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>
— Abhinav Singh
fonte
3

Puoi utilizzare la soluzione flessibile molto flessibile per il tuo Bootstrap.

justify-content: center;

può centrare la tua colonna.

Dai un'occhiata alla flessibilità .

— duro
fonte
2

Poiché non ho mai avuto la necessità di centrare solo un singolo .col-all'interno di a .row, ho impostato la seguente classe sull'involucro .rowdelle colonne di destinazione.

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

Esempio

<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>
— Walter Roman
fonte
2

Per coloro che cercano di centrare gli elementi della colonna sullo schermo quando non si dispone del numero esatto per riempire la griglia, ho scritto un piccolo pezzo 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 averne 3 per riga su uno mdschermo, 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.

— jsgoupil
fonte
2

Per centrare più di una colonna in una riga Bootstrap e il numero di csscolonne è dispari, aggiungi semplicemente questa classe 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:

<div class="row text-center"> <!-- text-center centers all text in that row -->
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image1.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image2.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image3.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
</div>
— Ruto Collins
fonte
2

Prova questo

<div class="row">
    <div class="col-xs-2 col-xs-offset-5"></div>
</div>

Puoi usare anche altri colcome col-md-2, ecc.

— Ch UmarJamil
fonte
2

Suggerisco semplicemente di usare la classe text-center:

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
— Dadhich Sourav
fonte
2

Prova questo codice.

<body class="container">
    <div class="col-lg-1 col-lg-offset-10">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

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 dispositivi medio-grandi, cambia semplicemente lg in md e così via.

— Bangash
fonte
2

Soluzione Bootstrap 4 :

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>
— JanBrus
fonte
1

Se lo metti nella tua riga, tutte le colonne all'interno saranno centrate:

.row-centered {
    display: flex;
    justify-content: space-between;
}
— Eran Shabi
fonte
reso l'elemento non reattivo.
— gfivehost,
1

Per essere più precisi, il sistema a griglia di Bootstrap contiene 12 colonne e per centrare qualsiasi contenuto, 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.

<div class="row">
   <div class="col-xs-2 col-xs-offset-5 centered">
      ... your content / data will come here ...
   </div>
</div>

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

'col-xs-2' sta dicendo al sistema a griglia quante colonne rimanenti dovrebbero occupare il contenuto.

'centrato' sarà una classe definita che centrerà il contenuto.

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

colonne:

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

....... offset ....... .data. .......non usato........

— Tech
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.