1146

Bagaimana cara memusatkan div dari satu ukuran kolom dalam wadah (12 kolom) di 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>

Luaskan cuplikan

Saya ingin div, dengan kelas .centereddipusatkan di dalam wadah. Saya dapat menggunakan baris jika ada banyak divs, tetapi untuk saat ini saya hanya ingin a divdengan ukuran satu kolom di tengah wadah (12 kolom).

Saya juga tidak yakin pendekatan di atas cukup baik karena tujuannya bukan untuk mengimbangi divsetengahnya. Saya tidak perlu ruang kosong di luar divdan isi divmenyusut dalam proporsi. Saya ingin mengosongkan ruang di luar div untuk didistribusikan secara merata (menyusut hingga lebar wadah sama dengan satu kolom).

css twitter-bootstrap twitter-bootstrap-3 centering bsr
sumber

1963

Ada dua pendekatan untuk memusatkan kolom <div>di Bootstrap 3:

Pendekatan 1 (offset):

Pendekatan pertama menggunakan kelas offset Bootstrap sendiri sehingga tidak memerlukan perubahan markup dan tidak ada CSS tambahan. Kuncinya adalah untuk mengatur offset sama dengan setengah dari ukuran baris yang tersisa . Jadi misalnya, kolom ukuran 2 akan dipusatkan dengan menambahkan offset 5, itu (12-2)/2.

Dalam markup ini akan terlihat seperti:

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

Sekarang, ada kelemahan yang jelas untuk metode ini. Ini hanya bekerja untuk ukuran kolom bahkan , sehingga hanya .col-X-2, .col-X-4, col-X-6,col-X-8 , dan col-X-10didukung.

Pendekatan 2 (yang lama `margin:auto`)

Anda dapat memusatkan ukuran kolom apa pun dengan menggunakan margin: 0 auto;teknik yang terbukti . Anda hanya perlu merawat floating yang ditambahkan oleh sistem grid Bootstrap. Saya sarankan mendefinisikan kelas CSS khusus seperti berikut:

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

Sekarang Anda dapat menambahkannya ke ukuran kolom apa pun pada ukuran layar apa pun, dan itu akan bekerja secara mulus dengan tata letak responsif Bootstrap:

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

Catatan: Dengan kedua teknik ini, Anda dapat melewati .rowelemen dan menempatkan kolom di tengah a .container, tetapi Anda akan melihat perbedaan minimal dalam ukuran kolom sebenarnya karena padding di kelas kontainer.

Memperbarui:

Karena v3.0.1 Bootstrap memiliki kelas bawaan bernama center-blockyang menggunakan margin: 0 auto, tetapi tidak ada float:none, Anda dapat menambahkan itu ke CSS Anda untuk membuatnya bekerja dengan sistem grid.

koala_dev
sumber

1

saya pikir tidak ada float: tidak ada dalam aturan pusat-blok karena ada aturan independen clearfix yang bisa Anda tambahkan ke elemen untuk membersihkan float.

Diego Fernando Murillo Valenci

7

@DiegoFernandoMurilloValenci .clearfixtidak akan bekerja dalam kasus ini karena tidak menghapus properti float pada elemen (yang diperlukan untuk menggunakan pusat margin: 0 auto), itu hanya membuat wadah membungkus elemen

apung

4

tidak dapat menggunakan ini pada kolom, karena tidak adafloat:none;

airtonix

2

Jika Anda ingin memusatkan lebih dari satu kolom dalam satu baris, lihat jawaban ini stackoverflow.com/questions/28683329/…

Conor Svensson

3

Sintaks untuk offset berubah dalam Bootstrap4 (pada versi terbaru). Menggunakan respons ini sebagai contoh: kelas col-md-offset-5 sekarang harus diimbangi-md-5.

lgants

296

Metode yang disukai dari keterpusatan kolom adalah dengan menggunakan "offset" (yaitu: col-md-offset-3)

Bootstrap 3.x contoh pemusatan

Untuk elemen pemusatan , ada center-block kelas pembantu .

Anda juga dapat menggunakan text-centeruntuk memusatkan teks (dan elemen sebaris).

Demo : http://bootply.com/91632

EDIT - Seperti disebutkan dalam komentar,center-blockbekerja pada konten dandisplay:blockelemenkolom, tetapi tidak akan berfungsi pada kolom itu sendiri (col-*div) karena Bootstrap menggunakanfloat.

Perbarui 2018

Sekarang dengan Bootstrap 4 , metode pemusatan telah berubah ..

text-centermasih digunakan untuk display:inlineelemen
mx-automenggantikan elemen center-blockpusatdisplay:block
offset-* atau mx-auto dapat digunakan untuk memusatkan kolom kotak

mx-auto(margin auto x-axis) akan berpusat display:blockatau display:flexelemen yang memiliki lebar didefinisikan , ( %, vw, px, dll ..). Flexbox digunakan secara default pada kolom kisi, jadi ada juga berbagai metode pemusatan flexbox.

Demo Bootstrap 4 Pemusatan Horizontal

Untuk pemusatan vertikal di BS4 lihat https://stackoverflow.com/a/41464397/171456

Zim
sumber

31

Sayangnya, kelas pembantu ini tidak berfungsi dengan sistem kolom karena tidak menangani properti float. Lihat demo ini misalnya.

koala_dev

13

Itu hanya membutuhkan blok-tengah {float: none; }, dan itu berfungsi. bootply.com/122268

Matias Vad

5

tidak yakin tentang OP, tapi saya sampai di sini mencari text-centerdetail - yang tidak ada jawaban lain yang diberikan. Yang ini mendapat suara saya.

domoarigato

1

tidak dapat menggunakan ini pada kolom, karena tidak adafloat:none;

airtonix

98

Sekarang Bootstrap 3.1.1 bekerja dengan baik .center-block, dan kelas pembantu ini bekerja dengan sistem kolom.

Pusat Kelas Penolong Bootstrap 3 .

Silakan periksa jsfiddle DEMO ini :

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

Pusat kelas pembantu

Pusat kolom baris menggunakan col-center-blockkelas helper.

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

Pengirim
sumber

Saya mendapatkan ini berfungsi tanpa menambahkan float:nonedengan memastikan div pusat-blok memiliki style="width : ?px"gaya yang diterapkan padanya. Misalnya lebar gambar. Bekerja dengan 3.2.2

Piotr Kula

margin: 0 otomatis; - cukup bukan margin-kiri + margin-kanan

mmike

57

Cukup tambahkan berikut ini ke file CSS khusus Anda. Mengedit Bootstrap file CSS secara langsung tidak disarankan dan membatalkan kemampuan Anda untuk menggunakan CDN .

.center-block {
    float: none !important
}

Mengapa?

Bootstrap CSS (versi 3.7 dan lebih rendah) menggunakan margin: 0 otomatis;, tetapi akan ditimpa oleh properti float dari wadah ukuran.

PS :

Setelah Anda menambahkan kelas ini, jangan lupa untuk mengatur kelas dengan urutan yang benar.

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

SEO yang sombong
sumber

1

Saya menggunakan Bootstrap 3.3.7dan ini adalah satu-satunya metode yang bekerja untuk saya!

illagrenan

1

ini bekerja. tapi jangan anggap !importantperlu

Gianfranco P.

1

@GianfrancoP. P. Hak Anda, tetapi ... itu tergantung pada urutan beban dan saya ingin memberikan metode yang sangat mudah.

Sagive SEO

39

Bootstrap 3 sekarang memiliki kelas bawaan untuk ini.center-block

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

Jika Anda masih menggunakan 2.X maka tambahkan saja ini ke CSS Anda.

Schmalzy
sumber

ini mungkin akan memberi Anda efek yang diinginkan paling mudah. Juga lempar lebar pada kelas .centered atau tambahkan kelas kedua jika Anda menginginkan pendekatan yang lebih modular

Matt Lambert

2

Menambahkan float: tidak ada; ke .centered memungkinkan Anda memindahkan kelas ke dalam wadah. menjaga pembersih kode

Adam Patterson

7

tidak dapat menggunakan ini pada kolom, karena tidak adafloat:none;

airtonix

37

Pendekatan saya ke kolom tengah adalah untuk digunakan display: inline-blockuntuk kolom dan text-align: centeruntuk induk wadah.

Anda hanya perlu menambahkan kelas CSS 'terpusat' ke 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
sumber

2

Ini adalah satu-satunya jawaban yang bekerja 100% dari waktu - Yang lain bekerja, tetapi tidak ketika bootstrap beralih ke tampilan selulernya (item dipindahkan ke sisi kiri).

Levi Fuller

Ini adalah satu-satunya yang bekerja saya juga, .center-blok hanya berfungsi untuk satu kolom dan saya harus memusatkan semua kolom terlepas dari berapa banyak.

cjohansson

Hanya solusi yang berhasil untuk saya juga. Yang lain hanya berfungsi saat browser berupa jendela, (bukan layar penuh).

kiwicomb123

26

Bootstrap versi 3 memiliki kelas .text-center.

Cukup tambahkan kelas ini:

text-center

Ini hanya akan memuat gaya ini:

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

Contoh:

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

RustyIngles
sumber

Perjelas di mana kelas ini akan ditambahkan?

aksu

Hai @aksu, Anda tidak perlu menambahkan .css. Lihatlah contoh yang diberikan.

JoshYates1980

21

Dengan Bootstrap v4, ini dapat dicapai hanya dengan menambahkan .justify-content-centerke.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
sumber

15

Ini bekerja. Cara hackish mungkin, tetapi bekerja dengan baik. Itu diuji untuk responsif (Y).

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

Desktop

Responsif

Ali Gajani
sumber

hanya berfungsi karena elemen memiliki diplay inline. Sebuah imgdapat ditetapkan sebagai blok.

ProfileTwist

Mungkin dalam kasus pengujian terisolasi Anda. Saya akan menambahkan .centered img { display: inline; }jawaban Anda dan kemudian akan layak untuk dipilih.

ProfileTwist

Tidak masalah. Saya yakin OP akan menemukan jawabannya :)

Ali Gajani

di bootstrap 3, kelas .text-center melakukan hal yang sama secara asli, seperti yang saya pelajari di atas.

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
sumber

6

Untuk memusatkan col- kita perlu menggunakan kode di bawah ini. cols adalah elemen floater selain margin otomatis. Kami juga akan mengaturnya untuk tidak melayang,

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

Untuk memusatkan col-lg-1 di atas dengan kelas centered, kita akan menulis:

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

Untuk memusatkan konten di dalam div, gunakan text-align:center,

.centered {
    text-align: center;
}

Jika Anda ingin memusatkannya hanya pada desktop dan layar yang lebih besar, bukan pada seluler, gunakan kueri media berikut.

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

Dan untuk memusatkan div hanya pada versi seluler, gunakan kode di bawah ini.

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

Aamer Shahzad
sumber

6

Cukup atur satu kolom Anda yang menampilkan konten ke col-xs-12 (mobile-first ;-) dan konfigurasikan wadah hanya untuk mengontrol seberapa lebar Anda ingin konten terpusat Anda menjadi, jadi:

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

Luaskan cuplikan

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

Luaskan cuplikan

Untuk demo, lihat http://codepen.io/Kebten/pen/gpRNMe :-)

Kieran Ryan
sumber

6

Pendekatan lain untuk mengimbangi adalah memiliki dua baris kosong, misalnya:

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

LeRoy
sumber

1

2 div yang tidak berguna, col-md-offset- * lebih baik

ymakux

1

Saya setuju. Saya menggunakan metode itu karena itu benar-benar berfungsi dengan baik dan diuji.

LeRoy

6

Anda dapat menggunakan text-centeruntuk baris dan dapat memastikan div internal telah display:inline-block(dengan tidakfloat ).

Sebagai:

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

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

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

Alireza Fattahi
sumber

6

Dengan bootstrap 4 Anda cukup mencoba justify-content-md-centerseperti yang disebutkan di sini

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

1

@AdamErickson Pertanyaan yang diajukan secara khusus untuk solusi bootstrap 3. Karena jawaban ini mungkin merupakan cara untuk masuk ke BS4, pada tahun 2019 beberapa perangkat lunak masih menggunakan bootstrap 3.

A1rPun

5

Ini mungkin bukan jawaban terbaik, tetapi ada satu lagi solusi kreatif untuk ini. Seperti yang ditunjukkan oleh koala_dev, kolom offset hanya berfungsi untuk ukuran kolom genap. Namun, dengan menyusun baris, Anda dapat mencapai kolom centering yang tidak rata juga.

Untuk tetap dengan pertanyaan asli di mana Anda ingin memusatkan kolom 1 di dalam kisi 12.

Tengahkan kolom 2 dengan mengimbanginya 5
Buat baris bersarang, sehingga Anda mendapatkan 12 kolom baru di dalam 2 kolom Anda.
Karena Anda ingin memusatkan kolom 1, dan 1 adalah "setengah" dari 2 (apa yang kami pusatkan pada langkah 1), Anda sekarang perlu memusatkan kolom 6 di baris bersarang Anda, yang mudah dilakukan dengan mengimbanginya 3.

Sebagai contoh:

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

Lihat biola ini , harap dicatat bahwa Anda harus meningkatkan ukuran jendela output agar juga melihat hasilnya, jika tidak kolom akan membungkus.

Reinder
sumber

5

Ini bukan kode saya, tetapi berfungsi dengan baik (diuji pada Bootstrap 3) dan saya tidak perlu dipusingkan dengan 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>

Luaskan cuplikan

Binar Web
sumber

4

Kita dapat mencapai ini dengan menggunakan mekanisme tata letak tabel:

Mekanismenya adalah:

Bungkus semua kolom dalam satu div.
Jadikan div itu sebagai tabel dengan tata letak tetap.
Jadikan setiap kolom sebagai sel tabel.
Gunakan properti perataan vertikal untuk mengontrol posisi konten.

Contoh demo ada di sini

Mohan Dere
sumber

4

Tambahkan potongan berikut di dalam .row atau .col Anda. Ini untuk Bootstrap 4 *.

d-flex justify-content-center

Thomas Chirwa
sumber

3

Seperti yang digunakan koala_dev dalam pendekatannya 1, saya lebih suka metode offset daripada blok-tengah atau margin yang penggunaannya terbatas, tetapi seperti yang ia sebutkan:

Sekarang, ada kelemahan yang jelas untuk metode ini, itu hanya bekerja untuk ukuran kolom genap, jadi hanya .col-X-2, .col-X-4, col-X-6, col-X-8 dan col-X- 10 didukung.

Ini dapat dipecahkan dengan menggunakan pendekatan berikut untuk kolom aneh.

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

Abhinav Singh
sumber

3

Anda dapat menggunakan flexbox solusi yang sangat fleksibel untuk Bootstrap Anda.

justify-content: center;

dapat memusatkan kolom Anda.

Lihat fleksibel .

Keras
sumber

2

Karena saya tidak pernah memiliki kebutuhan untuk memusatkan hanya satu di .col-dalam a .row, saya mengatur kelas berikut pada pembungkus .rowkolom target saya.

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

Contoh

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

2

Bagi mereka yang ingin memusatkan elemen kolom di layar ketika Anda tidak memiliki jumlah pasti untuk mengisi kisi Anda, saya telah menulis sedikit JavaScript untuk mengembalikan nama kelas:

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

Jika Anda memiliki 5 elemen dan Anda ingin memiliki 3 per baris pada mdlayar, lakukan ini:

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

Perlu diingat, argumen kedua harus dibagi 12.

jsgoupil
sumber

2

Untuk memusatkan lebih dari satu kolom di baris Bootstrap - dan jumlah cols ganjil, cukup tambahkan csskelas ini ke semua kolom di baris itu:

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

Jadi dalam HTML Anda, Anda memiliki sesuatu seperti:

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

2

Coba ini

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

Anda dapat menggunakan lainnya coljuga seperti col-md-2, dll.

Ch UmarJamil
sumber

2

Saya hanya menyarankan untuk menggunakan kelas text-center:

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

Dadhich Sourav
sumber

2

Coba kode ini.

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

Di sini saya telah menggunakan col-lg-1, dan offset harus 10 untuk benar memusatkan div pada perangkat besar. Jika Anda membutuhkannya untuk memusatkan pada perangkat menengah ke besar maka ubah saja lg ke md dan seterusnya.

Bangash
sumber

2

Solusi Bootstrap 4 :

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

JanBrus
sumber

1

Jika Anda meletakkan ini di baris Anda, semua kolom di dalamnya akan berada di tengah:

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

Eran Shabi
sumber

membuat elemen tidak responsif.

gfivehost

1

Untuk lebih tepatnya sistem grid Bootstrap berisi 12 kolom dan untuk memusatkan konten apa pun, misalkan, konten tersebut mengambil satu kolom. Seseorang harus menempati dua kolom dari kisi Bootstrap dan menempatkan konten pada setengah dari dua kolom yang ditempati.

<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' memberi tahu sistem grid tempat untuk mulai menempatkan konten.

'col-xs-2' memberi tahu sistem grid berapa banyak kolom sisa yang harus ditempati oleh konten.

'centered' akan menjadi kelas yang ditentukan yang akan memusatkan konten.

Berikut ini contohnya di sistem grid Bootstrap.

Kolom:

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

....... diimbangi ....... .data. .......tidak digunakan........

Tech
sumber

Tengahkan kolom menggunakan Twitter Bootstrap 3

Jawaban:

Pendekatan 1 (offset):

Pendekatan 2 (yang lama `margin:auto`)

Perbarui 2018

HTML:

CSS:

Kita dapat mencapai ini dengan menggunakan mekanisme tata letak tabel:

Contoh demo ada di sini

Tengahkan kolom menggunakan Twitter Bootstrap 3

Jawaban:

Pendekatan 1 (offset):

Pendekatan 2 (yang lama margin:auto)

Perbarui 2018

HTML:

CSS:

Kita dapat mencapai ini dengan menggunakan mekanisme tata letak tabel:

Contoh demo ada di sini

Pendekatan 2 (yang lama `margin:auto`)