css - testo - Centra una colonna usando Twitter Bootstrap




css creare due colonne (20)

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

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 fiddle avviamento.

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

Quindi, voglio un div , con una classe 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).


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

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

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


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.

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


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 classe CSS 'centrata' alla 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/


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

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,

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

Per centrare il sopra col-lg-1 con la classe 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;
    }
}

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

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

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.

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


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

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

Prova questo codice.

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

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.


Puoi usare text-center per la riga e assicurarti che le div interne abbiano una display:inline-block (con non 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/


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 è possibile 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:

<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 , per favore nota che devi aumentare la dimensione della finestra di output per vedere anche il risultato, altrimenti le colonne si avvolgeranno.


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

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


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

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

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 classe, non dimenticare di impostare le classi con l'ordine corretto.

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

Un altro approccio di compensazione consiste nell'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>

Bootstrap versione 3 ha una classe .text-center.

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

Metodo 1:

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

Metodo 2:

CSS

.float-center{float: none;}


<div class="container">
    <div id="mydev" class="center-block float-center" style="width:75%;">
        YOUR CONTENT
    </div>
</div>

Suggerimenti Bootstrap, esempi e strumenti: OnAirCode


<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>




centering