Bagaimana cara pusat div salah 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>
Aku ingin div
, dengan kelas .berpusat
akan berpusat di dalam wadah. Saya dapat menggunakan turut jika ada beberapa div, tapi untuk sekarang saya hanya ingin
div` dengan ukuran satu kolom yang berpusat dalam wadah (12 kolom).
Saya juga tidak yakin pendekatan di atas adalah cukup baik karena niatnya bukan untuk mengimbangi div
oleh setengah. Saya tidak perlu ruang bebas di luar div
dan isi div
menyusut dalam proporsi. Aku ingin ruang kosong di luar div akan merata (menyusut sampai wadah lebar sama dengan satu kolom).
Ada dua pendekatan yang berpusat di kolom <div>
di Bootstrap 3:
Pendekatan pertama menggunakan Bootstrap's sendiri offset kelas sehingga tidak memerlukan perubahan dalam markup dan tidak ada tambahan CSS. Kuncinya adalah untuk mengatur offset sama dengan setengah dari sisa size baris. Jadi misalnya, kolom ukuran 2 akan berpusat dengan menambahkan offset dari 5, yang's (12-2)/2
.
Di markup ini akan terlihat seperti:
<div class="row">
<div class="col-md-2 col-md-offset-5"></div>
</div>
Sekarang, ada's kelemahan yang jelas untuk metode ini. Hanya bekerja bahkan untuk kolom ukuran, jadi hanya .col-X-2
, .col-X-4
, col-X-6
, col-X-8
, dan col-X-10
yang didukung.
margin:auto
)Anda dapat pusat setiap kolom ukuran dengan menggunakan terbukti margin: 0 auto;
teknik. Anda hanya perlu untuk mengurus mengambang yang ditambahkan oleh Bootstrap's sistem grid. Saya merekomendasikan mendefinisikan kelas kustom CSS seperti berikut:
.col-centered{
float: none;
margin: 0 auto;
}
Sekarang anda dapat menambahkannya ke setiap ukuran kolom pada setiap ukuran layar, dan itu akan bekerja mulus dengan Bootstrap's tata letak responsif:
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
Catatan: Dengan kedua teknik ini, anda bisa melewatkan .baris
elemen dan memiliki kolom yang berpusat di dalam .container
, tetapi anda akan melihat perbedaan minimal dalam sebenarnya ukuran kolom karena padding dalam wadah kelas.
Update:
Sejak v3.0.1 Bootstrap memiliki built-in class bernama pusat-blok
yang menggunakan margin: 0 auto
, tapi hilang float:none
, anda bisa menambahkan CSS untuk membuatnya bekerja dengan sistem grid.
Metode yang disukai centering kolom adalah dengan menggunakan "offset" (yaitu: col-md-offset-3
)
Untuk centering elemen, ada pusat-blok
kelas helper.
Anda juga dapat menggunakan text-center
untuk *pusat teks* (dan unsur-unsur inline).
Demo: http://bootply.com/91632
EDIT - Seperti yang disebutkan dalam komentar, pusat-blok
bekerja pada kolom isi dan display:block
unsur-unsur, tapi tidak't bekerja pada kolom itu sendiri (col-*
div) karena Bootstrap menggunakan mengapung
.
Sekarang dengan Bootstrap 4 the centering metode telah berubah..
text-pusat
masih digunakan untuk display:inline
elemenmx-auto
menggantikan pusat-blok
center display:block
elemenoffset-*
atau mx-auto
dapat digunakan untuk pusat grid kolommx-auto
(x auto-axis margin) akan pusat display:block
atau display:flex
unsur-unsur yang memiliki a didefinisikan lebar, (%
, vw
, px
, dll.). Flexbox digunakan secara default pada kolom grid, jadi ada juga berbagai flexbox berpusat metode.
Demo Bootstrap 4 Horizontal Centering
Untuk vertikal berpusat di BS4 melihat https://stackoverflow.com/a/41464397/171456
Sekarang Bootstrap 3.1.1 bekerja sama dengan .pusat-blok
, dan ini kelas helper bekerja dengan sistem kolom.
Bootstrap 3 Kelas Helper Center.
Silahkan periksa [ini DEMO jsfiddle][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>
Baris kolom pusat dengan menggunakan col-pusat-blok
penolong kelas.
.col-center-block {
float: none;
display: block;
margin: 0 auto;
/* margin-left: auto; margin-right: auto; */
}
Cukup tambahkan kode berikut ke dalam file CSS kustom. Mengedit CSS Bootstrap file langsung tidak dianjurkan dan membatalkan kemampuan anda untuk menggunakan CDN.
.center-block {
float: none !important
}
Mengapa?
Bootstrap CSS (versi 3.7 dan bawah) menggunakan margin: 0 auto;, tapi itu akan diganti oleh float milik dari ukuran wadah.
PS:
Setelah anda menambahkan kelas ini, don't lupa untuk mengatur kelas dengan urutan yang benar.
<div class="col-md-6 center-block">Example</div>
Pendekatan saya ke pusat kolom adalah dengan menggunakan display: inline-block
untuk kolom dan text-align: center
untuk wadah induk.
Anda hanya perlu menambahkan class CSS 'berpusat' untuk row
.
<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>
.centered {
text-align: center;
font-size: 0;
}
.centered > div {
float: none;
display: inline-block;
text-align: left;
font-size: 13px;
}
JSFiddle:
Bootstrap versi 3 memiliki .teks-tengah kelas.
Hanya menambahkan kelas ini:
text-center
Itu 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>
Dengan Bootstrap v4, hal ini dapat dicapai hanya dengan menambahkan .membenarkan-content-pusat
ke .baris
<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
Anda dapat menggunakan text-center
untuk baris dan dapat memastikan internal div telah display:inline-block
(dengan tidak float
).
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:
Hanya mengatur satu kolom yang menampilkan konten untuk col-xs-12 (mobile-pertama ;-) dan mengkonfigurasi wadah hanya untuk mengontrol seberapa luas anda ingin anda berpusat pada konten, sehingga:
.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>
Atau:
<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>
Untuk demo, lihat http://codepen.io/Kebten/pen/gpRNMe :-)
Ini mungkin bukan jawaban terbaik, tapi ada satu yang lebih kreatif solusi untuk ini. Seperti yang ditunjukkan oleh koala_dev kolom mengimbangi bekerja hanya untuk bahkan ukuran kolom. Namun, oleh bersarang baris anda dapat mencapai berpusat merata kolom juga.
Untuk tetap dengan pertanyaan yang asli di mana anda ingin ke pusat kolom 1 dalam grid 12.
Misalnya:
<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][1], harap dicatat bahwa anda harus meningkatkan ukuran jendela output dalam rangka melihat hasilnya, jika kolom akan membungkus.
Untuk pusat col - kita perlu menggunakan kode di bawah ini. cols adalah floater unsur-unsur selain margin auto. Kami juga akan mengatur untuk float none,
<body class="container">
<div class="col-lg-1 col-md-4 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
Untuk center di atas col-lg-1 dengan kelas berpusat, kita akan menulis:
.centered {
float: none;
margin-left: auto;
margin-right: auto;
}
Pusat isi di dalam div, gunakan text-align:center
,
.centered {
text-align: center;
}
Jika anda ingin ke pusat itu hanya pada desktop dan layar yang lebih besar, bukan pada ponsel, maka gunakan media berikut query.
@media (min-width: 768px) {
.centered {
float: none;
margin-left: auto;
margin-right: auto;
}
}
Dan untuk pusat div hanya pada versi mobile, gunakan kode di bawah ini.
@media (max-width: 768px) {
.centered {
float: none;
margin-left: auto;
margin-right: auto;
}
}
Ini bukan kode, tetapi bekerja dengan sempurna (diuji pada Bootstrap 3) dan saya don't harus 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>
Mekanisme ini:
Dengan bootstrap 4 anda hanya dapat mencoba membenarkan-content-md-tengah
seperti 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>
Sebagai koala_dev digunakan dalam pendekatan 1, aku akan lebih memilih metode offset bukan pusat-blok atau margin yang telah dibatasi penggunaan, tetapi karena ia disebutkan:
Sekarang,'s kelemahan yang jelas untuk metode ini, hanya bekerja bahkan untuk ukuran kolom, sehingga hanya .col-X-2, .col-X-4, col-X-6, col-X-8 dan col-X-10 yang didukung.
Ini dapat diselesaikan dengan menggunakan pendekatan berikut untuk aneh kolom.
<div class="col-xs-offset-5 col-xs-2">
<div class="col-xs-offset-3">
// Your content here
</div>
</div>