Pertanyaan Pusatkan kolom menggunakan Twitter Bootstrap 3


Bagaimana cara memusatkan div satu ukuran kolom dalam wadah (12 kolom) di Twitter Bootstrap 3

Silakan lihat starter biola.

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

Jadi, saya ingin a div, dengan kelas centered untuk berpusat di dalam wadah. Saya dapat menggunakan baris jika ada beberapa div, tetapi untuk saat ini saya hanya ingin div dengan ukuran satu kolom yang berpusat di dalam wadah (12 kolom).

Saya juga tidak yakin pendekatan di atas cukup baik karena tujuannya bukan untuk mengimbangi div setengahnya. Saya tidak membutuhkan ruang kosong di luar div dan isi dari div mengecil secara proporsional. aku ingin ruang kosong di luar div untuk didistribusikan secara merata (menyusut sampai lebar kontainer == satu kolom).


972
2017-08-09 18:24


asal


Jawaban:


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

Pendekatan 1 (offset):

Pendekatan pertama menggunakan kelas offset Bootstrap sendiri sehingga tidak memerlukan perubahan dalam markup dan tanpa CSS tambahan. Kuncinya adalah untuk atur offset sama dengan setengah dari ukuran sisa baris. 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 kekurangan yang jelas untuk metode ini, ini hanya berfungsi untuk ukuran kolom saja, jadi hanya .col-X-2, .col-X-4, col-X-6, col-X-8 dan col-X-10 didukung.


Pendekatan 2 (margin lama: otomatis)

Kamu bisa pusatkan semua ukuran kolom dengan menggunakan yang terbukti margin: 0 auto; teknik, Anda hanya perlu merawat floating yang ditambahkan oleh sistem grid Bootstrap. Saya merekomendasikan 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 dengan mulus dengan tata letak responsif Bootstrap:

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

catatan: Dengan kedua teknik itu, Anda bisa melewatkannya .row elemen dan memiliki kolom yang berpusat di dalam .container tetapi Anda akan melihat perbedaan minimal dalam ukuran kolom sebenarnya karena padding di kelas kontainer.


Memperbarui:

Sejak v3.0.1 Bootstrap memiliki kelas built-in bernama center-block yang menggunakan margin: 0 auto tetapi hilang float:none. Anda dapat menambahkannya ke CSS Anda untuk membuatnya bekerja dengan sistem grid.


1745
2017-08-09 18:45



Metode yang disukai dari kolom yang berpusat adalah menggunakan "offset" (misalnya: col-md-offset-3)

Contoh-contoh pemusatan Bootstrap 3.x

Untuk elemen yang berpusat, ada sebuah center-block  kelas pembantu.

Anda juga bisa menggunakan text-center untuk teks tengah (dan elemen inline).

Demo: http://bootply.com/91632

EDIT - Seperti yang disebutkan di komentar, center-block berfungsi pada konten kolom dan display:block elemen, tetapi tidak berfungsi pada kolom itu sendiri (col-* divs) karena Bootstrap menggunakan float.


Perbarui 2018

Sekarang dengan Bootstrap 4, yang berpusat metode telah berubah ..

  • text-centermasih digunakan untuk display:inline elemen
  • mx-auto menggantikan center-block ke pusat display:block elemen
  • offset-*  atau  mx-auto dapat digunakan untuk memusatkan kolom grid

mx-auto (margin x-axis otomatis) akan menjadi pusat display:block atau display:flex elemen yang memiliki lebar yang ditentukan, (%, vw, px, dll ..). Flexbox digunakan secara default pada kolom jaringan, jadi ada juga berbagai metode pemfokusan flexbox.

Demo Bootstrap 4 Pemusatan Horisontal

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


244
2017-12-03 18:12



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

Bootstrap 3 Pusat Kelas Pembantu.

Tolong periksa DEMO jsfiddle 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>

Helper classes center

Pusat kolom baris menggunakan col-center-block kelas pembantu.

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

90
2018-03-18 06:31



Cukup tambahkan ini ke file CSS kustom Anda, mengedit file CSS Bootstrap langsung tidak disarankan dan membatalkan kemampuan Anda untuk menggunakan cdn.

.center-block {
    float: none !important
}

Mengapa? 

Bootstrap CSS (Ver 3.7 dan lebih rendah) menggunakan: margin: 0 otomatis;, tetapi itu 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>

50
2017-12-15 03:12



Bootstrap 3 sekarang memiliki kelas built-in untuk ini .center-block

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

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


37
2017-08-09 18:39



Pendekatan saya ke kolom tengah akan digunakan display: inline-block untuk kolom dan text-align: center untuk induk penampung.

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/


31
2018-02-16 10:27



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>   

25
2017-07-16 14:20