Centru o coloană folosind Twitter Bootstrap 3

Cum am center-un div de o coloană de dimensiune în container (12 coloane) în Bootstrap Twitter 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>

Vreau o div, cu o clasa .centrat să fie centrat în interiorul containerului. Pot folosi un rând dacă există mai multe div, dar acum vreau doar undiv` cu dimensiunea de o coloană centrată în container (12 coloane).

De asemenea, nu sunt sigur că abordarea de mai sus este destul de bun, deoarece intenția nu este de a compensa div de jumătate. Nu am nevoie de spații libere în afara div, și conținutul de div micșora proporțional. Vreau sa spațiu gol în afara div să fie distribuite uniform (psihiatru până la container lățime este egală cu o coloană).

daaawx
Întrebarea editată 17 martie 2019 в 7:03
Programare
css twitter-bootstrap-3 twitter-bootstrap centering
9 august 2013 в 6:24
12 vizualizări
Soluția

Există două abordări pentru centrare-o coloană `

în Bootstrap 3:

Abordare 1 (offset):

Prima abordare utilizează Bootstrap's propria offset clase, astfel este nevoie de nici o schimbare în marcaj și nici CSS suplimentar. Cheia este de a setați un offset egal cu jumătate din restul de dimensiunea rândului. Deci, de exemplu, o coloană de dimensiune 2 ar fi centrat prin adăugarea unui offset de 5, care's (12-2)/2.

În markup aceasta ar arăta astfel:

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

Acum, acolo's un dezavantaj evident pentru această metodă. Funcționează numai pentru chiar dimensiunile coloanelor, deci numai .col-X-2, .col-X-4, col-X-6, col-X-8", și " col-X-10 sunt acceptate.

Abordare 2 (vechi margin:auto)

Puteți centru de orice dimensiune coloană cu ajutorul dovedit margin: 0 auto; tehnica. Trebuie doar să aibă grijă de plutitor care este adăugat cu Bootstrap's sistem grilă. Recomand definind o clasa CSS personalizat, cum ar fi următoarele:

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

Acum puteți adăuga la orice dimensiune coloană la orice dimensiune a ecranului, și va funcționa perfect cu Bootstrap's layout responsive:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>
**Notă:** Cu ambele tehnici ai putea sari peste `.rând` element și au coloana centrat în interiorul o `.container`, dar ar trebui să observați o diferență minimă în real dimensiunea coloanei pentru că de umplutură în clasă container.

Actualizare:

De la v3.0.1 Bootstrap are un built-in clasa cu numele de centru-bloccare foloseștemargin: 0 auto, dar lipseștefloat:none`, poți să adaugi și CSS pentru a face să funcționeze cu sistemul de rețea.

Peter Mortensen
Răspuns editat 4 martie 2019 в 3:00
Comentarii (20)

Metoda preferată de centrarea coloane este de a folosi "compensează" (de exemplu: col-md-offset-3)

Bootstrap 3.x centrarea exemple

Pentru elemente de centrare, există un centru-bloc` helper class.

Puteți folosi, de asemenea, text-center a centrul de text (inline și elemente).

Demo: http://bootply.com/91632

EDIT - după Cum sa menționat în comentarii, centru-blocfuncționează pe coloana conținutul șidisplay:blockelemente, dar a câștigat&#39;t de lucru pe coloana în sine (col-*` divs) pentru Bootstrap folosește "float".

Update 2018

Acum cu Bootstrap 4, la centrare metodele s-au schimbat..

  • text-center este încă folosit pentru display:inline elemente
  • mx-auto înlocuiește centru-blocde la centrudisplay:block` elemente
  • offset-* sau `mx-auto poate fi utilizat de la centrul de coloane grid

mx-auto (auto x-axa marjele) va centerdisplay:block " sau " display:flexelemente care au o *definite lățime*, (%,vw,px`, etc..). Flexbox este utilizat în mod implicit de pe grila de coloane, astfel încât există, de asemenea, diverse flexbox de centrare metode.

Demo Bootstrap 4 Orizontală Centrarea

Pentru centrarea verticala în BS4 vezi https://stackoverflow.com/a/41464397/171456

Comentarii (5)

Acum Bootstrap 3.1.1 este de lucru cu.centru-bloc`, iar acest lucru helper class funcționează cu coloana sistem.

Bootstrap 3 Helper Class Center.

Vă rugăm să verificați [acest jsfiddle DEMO][2]:

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

Rând coloana center folosind col-centru-bloc helper class.

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

Pur și simplu adăugați următoarele la fișier CSS personalizat. Editare Bootstrap CSS fișiere direct nu este recomandată și anulează capacitatea de a utiliza o CDN.

.center-block {
    float: none !important
}

De ce?

Bootstrap CSS (versiunea 3.7 și inferioară) utilizări margin: 0 auto;, dar devine înlocuite cu proprietatea float de dimensiunea containerului.

PS:

După ce adăugați această clasă, don't uitați să setați clase de ordine.

<div class="col-md-6 center-block">Example</div>
Peter Mortensen
Răspuns editat 4 martie 2019 в 3:02
Comentarii (4)

Bootstrap 3 acum, are un built-in clasa pentru asta.centru-bloc`

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

Dacă sunteți încă utilizați 2.X atunci trebuie doar să adăugați acest la CSS.

Comentarii (3)

Abordarea mea la centrul de coloane este de a utiliza display: inline-block pentru coloane șitext-align: center pentru containerului părinte.

Trebuie doar să adăugați clasa CSS 'centrat' la "rând".

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/

Peter Mortensen
Răspuns editat 4 martie 2019 в 3:06
Comentarii (3)

Bootstrap versiunea 3 are un .text-center clasa.

Trebuie doar să adăugați această clasă:

text-center

Se va încărca pur și simplu acest stil:

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

Exemplu:

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>
Comentarii (2)

Cu Bootstrap v4, acest lucru poate fi realizat doar prin adăugarea .justifica-conținut-centru "la".rând <div>

<div class="row justify-content-center">
    <div class="col-1">centered 1 column</div>
</div>

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

Comentarii (0)

Aceasta funcționează. Un hackish mod probabil, dar funcționează bine. Acesta a fost testat pentru receptiv (Y).

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

Comentarii (5)

Puteți folosi text-center la rând și poate asigura interne divs au display:inline-block (cu nu "float").

Ca:

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

Și 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
}

Vioara: http://jsfiddle.net/DTcHh/3177/

Peter Mortensen
Răspuns editat 4 martie 2019 в 3:05
Comentarii (0)
 
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">

        </div>
    </div>
</div>
Comentarii (0)

Doar seta o coloană care afișează conținutul col-xs-12 (primul mobil ;-) și configurați recipient doar pentru a controla cât de mare vrei centrată pe conținut pentru a fi, deci:

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

    <div class="col-xs-12 centered">

    </div>

Sau:


    <div class="col-xs-12 centered">

    </div>

Pentru un demo, vezi http://codepen.io/Kebten/pen/gpRNMe :-)

Comentarii (0)

O altă abordare de compensare este de a avea două rânduri goale, de exemplu:

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>
Comentarii (2)

Acest lucru este, probabil, cel mai bun răspuns, dar există mai multe soluții creative pentru asta. După cum a subliniat de către koala_dev coloana de compensare funcționează chiar și numai pentru dimensiunile coloanei. Cu toate acestea, prin cuiburi rânduri puteți realiza centrarea inegale coloane la fel de bine.

Să rămânem cu întrebarea inițială în cazul în care doriți să centru o coloană de 1 într-o grilă de 12.

  1. Centru o coloană de 2 de compensare de 5
  2. Face o imbricate rând, astfel încât să obțineți un nou 12 coloane în interiorul tău 2 coloane.
  3. Când vrei să-centru o coloană de 1, iar 1 este "o jumătate" a 2 (ce-am centrat în pasul 1), acum trebuie să centru o coloană de 6 în imbricate rând, care este ușor de făcut prin compensarea 3.

De exemplu:

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

A se vedea [acest vioara][1], vă rugăm să rețineți că veți avea de a crește dimensiunea de fereastra de ieșire, în scopul de a vedea rezultatul, altfel coloane se va încheia.

Comentarii (0)

La centrul de la col - avem nevoie pentru a folosi codul de mai jos. cols sunt plutitor elemente în plus marja auto. Vom seta, de asemenea, să plutească nici unul,


    <div class="col-lg-1 col-md-4 centered">

    </div>

La centrul mai sus col-lg-1 cu clasa a centrat, vom scrie:

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

La centrul de conținutul în interiorul div, folosi text-align:center,

.centered {
    text-align: center;
}

Dacă doriți pentru a centra doar pe desktop și ecran mai mare, nu pe mobil, apoi utilizați următoarea interogare mass-media.

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

Și la centrul div doar pe versiunea de mobil, utilizați codul de mai jos.

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

Acest lucru nu este codul meu, dar functioneaza perfect (testat pe Bootstrap 3) și eu nu't trebuie să mizerie în jurul cu 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>
Gianfranco P.
Răspuns editat 22 februarie 2019 в 1:17
Comentarii (1)

Putem realiza acest lucru cu ajutorul aspectul de masă mecanism:

Mecanismul este:

  1. Folie toate coloanele într-un div.
  2. Face asta div ca o masă cu aspect fix.
  3. Face fiecare coloană ca o celulă de tabel.
  4. Utilizarea vertical-align proprietatea de a controla conținutul de poziție.

Proba demo este aici

Peter Mortensen
Răspuns editat 19 mai 2018 в 6:42
Comentarii (0)

Cu bootstrap 4 puteți încerca pur și simplu justifica-conținut-md-centru cum este menționat aici

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

Comentarii (2)

Ca koala_dev utilizate în abordarea lui 1, aș prefera metoda offset în loc de centru-bloc sau marjele de care are utilizare limitată, dar ca el a menționat:

Acum,'s un dezavantaj evident pentru această metodă, doar că funcționează chiar și pentru dimensiunile coloanei, deci numai .col-X-2, .col-X-4, col-X-6, col-X-8 și col-X-10 sunt acceptate.

Acest lucru poate fi rezolvată folosind următoarea abordare pentru coloane impare.

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

Puteți folosi foarte flexibilă soluție flexbox la Bootstrap.

justify-content: center;

pot centrul coloana ta.

Check out flex.

Comentarii (0)