1146

Jak wyśrodkować div o rozmiarze jednej kolumny w kontenerze (12 kolumn) w programie Bootstrap 3 na Twitterze ?

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

Rozwiń fragment kodu

Chcę div, .centeredaby klasa była wyśrodkowana w kontenerze. Mogę użyć wiersza, jeśli jest wiele divs, ale na razie chcę tylko divz wielkością jednej kolumny wyśrodkowanej w kontenerze (12 kolumn).

Nie jestem również pewien, czy powyższe podejście jest wystarczająco dobre, ponieważ nie zamierzamy zrównoważyć tego divo połowę. Nie potrzebuję wolnych przestrzeni na zewnątrz divi zawartości divskurczu w proporcji. Chcę, aby puste miejsce poza div było równomiernie rozmieszczone (zmniejszaj się, aż szerokość kontenera będzie równa jednej kolumnie).

css twitter-bootstrap twitter-bootstrap-3 centering bsr
źródło

1963

Istnieją dwa podejścia do centrowania kolumny <div>w Bootstrap 3:

Podejście 1 (przesunięcia):

Pierwsze podejście wykorzystuje własne klasy przesunięcia Bootstrap, więc nie wymaga zmiany znaczników i dodatkowego CSS. Kluczem jest ustawienie przesunięcia równego połowie pozostałego rozmiaru wiersza . Na przykład kolumna o rozmiarze 2 byłaby wyśrodkowana przez dodanie przesunięcia o wartości 5, to znaczy (12-2)/2.

W znacznikach wyglądałoby to tak:

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

Teraz ta metoda ma oczywistą wadę. To działa tylko na nawet wielkości kolumn , tak tylko .col-X-2, .col-X-4, col-X-6, col-X-8, i col-X-10są obsługiwane.

Podejście 2 (stare `margin:auto`)

Możesz wyśrodkować dowolny rozmiar kolumny za pomocą sprawdzonej margin: 0 auto;techniki. Musisz tylko zadbać o pływanie, które dodaje system siatki Bootstrap. Zalecam zdefiniowanie niestandardowej klasy CSS, takiej jak:

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

Teraz możesz dodać go do dowolnego rozmiaru kolumny przy dowolnym rozmiarze ekranu i będzie on działał bezproblemowo z responsywnym układem Bootstrap:

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

Uwaga: Za pomocą obu technik można pominąć .rowelement i wyśrodkować kolumnę w środku .container, ale można zauważyć minimalną różnicę w rzeczywistym rozmiarze kolumny z powodu wypełnienia w klasie kontenera.

Aktualizacja:

Ponieważ v3.0.1 Bootstrap ma wbudowaną klasę o nazwie, center-blockktóra używa margin: 0 auto, ale jej brakuje float:none, możesz ją dodać do swojego CSS, aby działał z systemem grid.

koala_dev
źródło

1

myślę, że nie ma pływaka: brak w regule bloku centralnego, ponieważ istnieje niezależna od clearfix reguła, którą można dodać do elementów w celu wyczyszczenia pływaków.

Diego Fernando Murillo Valenci

7

@DiegoFernandoMurilloValenci .clearfixnie działałby w tym przypadku, ponieważ nie usuwa właściwości float na elementach (które są potrzebne do wyśrodkowania za pomocą margin: 0 auto), po prostu sprawia, że pojemnik zawija wszelkie pływające elementy wewnątrz

koala_dev

4

nie można tego użyć w kolumnie, ponieważ nofloat:none;

airtonix

2

Jeśli chcesz wyśrodkować więcej niż jedną kolumnę w jednym wierszu, zobacz tę odpowiedź stackoverflow.com/questions/28683329/…

Conor Svensson

3

Składnia przesunięcia została zmieniona w Bootstrap4 (od najnowszej wersji). Wykorzystując tę odpowiedź jako przykład: klasa col-md-offset-5 powinna teraz mieć wartość offset-md-5.

lgants

296

Preferowaną metodą centrowania kolumny jest użycie „przesunięcia” (czyli: col-md-offset-3)

Przykłady centrowania Bootstrap 3.x.

Dla elementów centrujących istnieje center-block klasa pomocnicza .

Możesz także użyć text-centerdo wyśrodkowania tekstu (i elementów wstawianych).

Demo : http://bootply.com/91632

EDYCJA - jak wspomniano w komentarzach,center-blockdziała na zawartość kolumny idisplay:blockelementy, ale nie działa na samej kolumnie (col-*div), ponieważ używa Bootstrapfloat.

Aktualizacja 2018

Teraz z Bootstrap 4 , gdy centrujące metody zmieniły ..

text-centerjest nadal używany do display:inlineelementów
mx-autozastępuje elementy center-blockśrodkowedisplay:block
offset-* lub mx-auto może być użyty do wyśrodkowania kolumn siatki

mx-auto(marginesy automatycznego oś x) będzie koncentrować display:blocklub display:flexelementów, które mają określoną szerokość , ( %, vw, pxitp ..). Flexbox jest domyślnie używany w kolumnach siatki, więc istnieją również różne metody centrowania Flexbox.

Demo Bootstrap 4 Poziome centrowanie

Centrowanie pionowe w BS4 patrz https://stackoverflow.com/a/41464397/171456

Zim
źródło

31

Niestety ta klasa pomocnicza nie działa z systemem kolumn, ponieważ nie dba o właściwość float. Zobacz na przykład to demo .

koala_dev,

13

Wymaga to tylko środkowego bloku {float: none; } i działa. bootply.com/122268

Matias Vad

5

nie jestem pewien co do OP, ale przybyłem tutaj, szukając text-centerszczegółów - czego nie dostarczyła żadna inna odpowiedź. Ten dostaje mój głos.

domoarigato

1

nie można tego użyć w kolumnie, ponieważ nofloat:none;

airtonix

98

Teraz Bootstrap 3.1.1 współpracuje .center-block, a ta klasa pomocnicza działa z systemem kolumn.

Bootstrap 3 Centrum klasy pomocników .

Proszę sprawdzić to jsfiddle DEMO :

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

Centrum klas pomocniczych

Centrum kolumny wiersza za pomocą col-center-blockklasy pomocniczej.

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

Nadawca
źródło

Pracowałem bez dodawania float:none, upewniając się, że środkowy blok div ma style="width : ?px"zastosowany styl. Na przykład szerokość obrazu. Współpracuje z 3.2.2

Piotr Kula

margines: 0 auto; - wystarczy zamiast marginesu lewy + margines prawy

mmike

57

Po prostu dodaj następujące elementy do niestandardowego pliku CSS. Bezpośrednia edycja plików Bootstrap CSS nie jest zalecana i anuluje możliwość korzystania z CDN .

.center-block {
    float: none !important
}

Dlaczego?

Bootstrap CSS (wersja 3.7 i niższe) używa marginesu: 0 auto; , ale zostaje zastąpione przez właściwość float kontenera wielkości.

PS :

Po dodaniu tej klasy nie zapomnij ustawić klas we właściwej kolejności.

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

Sagive SEO
źródło

1

Używam Bootstrap 3.3.7i jest to jedyna metoda, która działa dla mnie!

illagrenan

1

to działa. ale nie sądzę, że !importantjest to konieczne

Gianfranco P.

1

@GianfrancoP. P. Masz rację, ale ... to zależy od kolejności ładowania i chciałem zapewnić niezawodną metodę.

Sagive SEO

39

Bootstrap 3 ma teraz wbudowaną klasę do tego.center-block

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

Jeśli nadal używasz 2.X, po prostu dodaj to do swojego CSS.

Schmalzy
źródło

prawdopodobnie najłatwiej dałoby to pożądany efekt. Rzuć też szerokość na klasę .centered lub dodaj drugą klasę, jeśli wybierasz podejście bardziej modułowe

Matt Lambert

2

Dodanie liczby zmiennoprzecinkowej: brak; na .centered pozwala przenieść klasę do kontenera. utrzymuje kod w czystości

Adam Patterson

7

nie można tego użyć w kolumnie, ponieważ nofloat:none;

airtonix

37

Moje podejście do środkowych kolumn polega na użyciu display: inline-blockkolumn i text-align: centerelementu nadrzędnego kontenera.

Musisz tylko dodać klasę CSS „wyśrodkowaną” do 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
źródło

2

To jedyna odpowiedź, która działała przez 100% czasu - pozostałe działały, ale nie wtedy, gdy bootstrap przełączył się na widok mobilny (elementy zostały przeniesione na lewą stronę).

Levi Fuller,

To był jedyny, który mnie również zadziałał, .center-block działa tylko na jedną kolumnę i muszę wyśrodkować wszystkie kolumny niezależnie od ich liczby.

cjohansson,

Jedyne rozwiązanie, które dla mnie zadziałało. Inne działały tylko wtedy, gdy przeglądarka była oknem (nie na pełnym ekranie).

kiwicomb123

26

Bootstrap w wersji 3 ma klasę .text-center.

Po prostu dodaj tę klasę:

text-center

Po prostu załaduje ten styl:

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

Przykład:

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

RustyIngles
źródło

Wyjaśnij, gdzie ta klasa zostanie dodana?

aksu

Cześć @aksu, nie musisz dodawać żadnych plików .css. Spójrz na podany przykład.

JoshYates1980,

21

Z Bootstrap v4 można to zrobić, dodając .justify-content-centerdo pliku.row <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

joknawe
źródło

15

To działa. Cholera prawdopodobnie, ale działa dobrze. Został przetestowany pod kątem responsywności (Y).

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

Pulpit

Czuły

Ali Gajani
źródło

działa tylko dlatego, że element ma wstawkę diplay. imgMoże być ustawiona jako blok.

ProfileTwist

Być może w twoim izolowanym przypadku testowym. Dodałbym .centered img { display: inline; }do twojej odpowiedzi, a wtedy byłoby warte większego głosowania.

ProfileTwist

Nie ma problemu. Jestem pewien, że OP znajdzie swoją odpowiedź :)

Ali Gajani,

w bootstrap 3 klasa .text-center robi to samo, jak się dowiedziałem powyżej.

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
źródło

6

Aby wyśrodkować kolumnę, musimy użyć poniższego kodu. cols są elementami zmiennoprzecinkowymi oprócz auto marginesu. Ustawimy go również na brak zmiennoprzecinkowy,

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

Aby wyśrodkować powyższą kolumnę-lg-1 klasą środka, napiszemy:

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

Aby wyśrodkować zawartość wewnątrz div, użyj text-align:center,

.centered {
    text-align: center;
}

Jeśli chcesz wyśrodkować go tylko na pulpicie i na większym ekranie, a nie na telefonie komórkowym, użyj następującego zapytania o media.

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

Aby wyśrodkować div tylko na wersji mobilnej, użyj poniższego kodu.

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

Aamer Shahzad
źródło

6

Po prostu ustaw jedną kolumnę wyświetlającą treść na col-xs-12 (najpierw na urządzeniu mobilnym ;-) i skonfiguruj tylko kontener, aby kontrolować, jak szeroka ma być wyśrodkowana zawartość, więc:

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

Rozwiń fragment kodu

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

Rozwiń fragment kodu

Aby zobaczyć demo, zobacz http://codepen.io/Kebten/pen/gpRNMe :-)

Kieran Ryan
źródło

6

Innym podejściem do kompensacji jest posiadanie dwóch pustych wierszy, na przykład:

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>

LeRoy
źródło

1

2 bezużyteczne divy, col-md-offset- * jest lepszy

ymakux

1

Zgadzam się. Użyłem tej metody, ponieważ faktycznie działa ona dobrze i przetestowana.

LeRoy,

6

Możesz użyć text-centerdla wiersza i upewnić się, że wewnętrzne div mają display:inline-block(z nie float).

Tak jak:

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

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

Alireza Fattahi
źródło

6

Z bootstrap 4 możesz po prostu spróbować, justify-content-md-centerjak tu wspomniano

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

Hossein Narimani Rad
źródło

1

@AdamErickson Pytanie zadane specjalnie dla rozwiązania bootstrap 3. Ponieważ ta odpowiedź jest prawdopodobnie najlepszym rozwiązaniem w BS4, w 2019 r. Niektóre programy nadal używają bootstrap 3.

A1rPun

5

Prawdopodobnie nie jest to najlepsza odpowiedź, ale istnieje jeszcze jedno twórcze rozwiązanie tego problemu. Jak wskazał koala_dev, kompensacja kolumn działa tylko dla parzystych rozmiarów kolumn. Jednak poprzez zagnieżdżanie wierszy można również centrować nierówne kolumny.

Aby trzymać się pierwotnego pytania, w którym chcesz wyśrodkować kolumnę 1 w siatce 12.

Wyśrodkuj kolumnę 2, przesuwając ją 5
Utwórz zagnieżdżony wiersz, aby uzyskać nowe 12 kolumn w swoich 2 kolumnach.
Ponieważ chcesz wyśrodkować kolumnę 1, a 1 to „połowa” 2 (co wyśrodkowaliśmy w kroku 1), musisz teraz wyśrodkować kolumnę 6 w zagnieżdżonym rzędzie, co można łatwo zrobić, przesuwając ją 3.

Na przykład:

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

Zobacz to skrzypce , pamiętaj, że musisz zwiększyć rozmiar okna wyjściowego, aby również zobaczyć wynik, w przeciwnym razie kolumny się zawiną.

reinder
źródło

5

To nie jest mój kod, ale działa idealnie (testowany na Bootstrap 3) i nie muszę się bawić z offsetem col.

Próbny:

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

Rozwiń fragment kodu

Binar Web
źródło

4

Możemy to osiągnąć za pomocą mechanizmu układu tabeli:

Mechanizm jest następujący:

Zawiń wszystkie kolumny w jeden div.
Zrób ten div jako tabelę o stałym układzie.
Ustaw każdą kolumnę jako komórkę tabeli.
Użyj właściwości wyrównania do pionu, aby kontrolować pozycję zawartości.

Przykładowe demo jest tutaj

Mohan Dere
źródło

4

Dołącz następujący fragment kodu do pliku .row lub .col. To jest dla Bootstrap 4 *.

d-flex justify-content-center

Thomas Chirwa
źródło

3

Jak koala_dev używał w swoim podejściu 1, wolałbym metodę offsetową zamiast bloku środkowego lub marginesów, które mają ograniczone użycie, ale jak wspomniał:

Ta metoda ma oczywistą wadę, działa tylko dla parzystych rozmiarów kolumn, więc tylko .col-X-2, .col-X-4, col-X-6, col-X-8 i col-X- Obsługiwanych jest 10.

Można to rozwiązać, stosując następujące podejście do nieparzystych kolumn.

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

Abhinav Singh
źródło

3

Możesz użyć bardzo elastycznego rozwiązania flexbox do Bootstrap.

justify-content: center;

może wyśrodkować kolumnę.

Sprawdź flex .

Szorstki
źródło

2

Ponieważ nigdy nie muszę wyśrodkowywać tylko jednego .col-w ciągu .row, ustawiam następującą klasę na zawijanie .rowmoich docelowych kolumn.

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

Przykład

<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
źródło

2

Dla tych, którzy chcą wyśrodkować elementy kolumny na ekranie, gdy nie masz dokładnej liczby do wypełnienia siatki, napisałem mały fragment kodu JavaScript, aby zwrócić nazwy klas:

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

Jeśli masz 5 elementów i chcesz mieć 3 na wiersz na mdekranie, wykonaj następujące czynności:

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

Pamiętaj, że drugi argument musi być podzielny przez 12.

jsgoupil
źródło

2

Aby wyśrodkować więcej niż jedną kolumnę w wierszu Bootstrap - a liczba kolumn jest nieparzysta, po prostu dodaj tę cssklasę do wszystkich kolumn w tym wierszu:

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

Więc w swoim HTML masz coś takiego:

<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
źródło

2

Spróbuj tego

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

Możesz użyć innych, coljak col-md-2itp.

Ch UmarJamil
źródło

2

Proponuję po prostu użyć klasy text-center:

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

Dadhich Sourav
źródło

2

Wypróbuj ten kod.

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

Tutaj użyłem col-lg-1, a przesunięcie powinno wynosić 10 dla poprawnie wyśrodkowanego div na dużych urządzeniach. Jeśli potrzebujesz, aby wyśrodkować go na średnich i dużych urządzeniach, po prostu zmień lg na md i tak dalej.

Bangash
źródło

2

Rozwiązanie Bootstrap 4 :

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

JanBrus
źródło

1

Jeśli umieścisz to w swoim rzędzie, wszystkie kolumny w środku zostaną wyśrodkowane:

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

Eran Shabi
źródło

spowodował, że element nie reaguje.

gfivehost

1

Aby być bardziej precyzyjnym, system siatki Bootstrap zawiera 12 kolumn, a aby wyśrodkować dowolną zawartość, powiedzmy, na przykład, zawartość zajmuje jedną kolumnę. Trzeba będzie zająć dwie kolumny siatki Bootstrap i umieścić zawartość na połowie dwóch zajętych kolumn.

<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” mówi systemowi siatki, od czego zacząć umieszczać zawartość.

„col-xs-2” mówi systemowi siatki, ile pozostałych kolumn powinno zająć zawartość.

„wyśrodkowany” będzie zdefiniowaną klasą, która będzie centrować treść.

Oto jak wygląda ten przykład w systemie siatki Bootstrap.

Kolumny:

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

....... offset ........ dane. .......nieużywany........

Tech
źródło

Wyśrodkuj kolumnę za pomocą Twitter Bootstrap 3

Odpowiedzi:

Podejście 1 (przesunięcia):

Podejście 2 (stare `margin:auto`)

Aktualizacja 2018

HTML:

CSS:

Możemy to osiągnąć za pomocą mechanizmu układu tabeli:

Przykładowe demo jest tutaj

Wyśrodkuj kolumnę za pomocą Twitter Bootstrap 3

Odpowiedzi:

Podejście 1 (przesunięcia):

Podejście 2 (stare margin:auto)

Aktualizacja 2018

HTML:

CSS:

Możemy to osiągnąć za pomocą mechanizmu układu tabeli:

Przykładowe demo jest tutaj

Podejście 2 (stare `margin:auto`)