I'm mencoba untuk mengikuti contoh yang sangat dasar. Menggunakan starter halaman dan sistem grid, saya berharap hal berikut:
<div class="row">
<div class="span12">
<h1>Bootstrap starter template</h1>
<p>Example text.</p>
</div>
</div>
...akan menghasilkan berpusat pada teks.
Namun, hal itu masih muncul di paling kiri. Apa yang saya lakukan salah?
Untuk jenis konten lainnya, lihat Flavien's jawaban.
Update: Bootstrap 2.3.0+ Jawaban
Asli jawabannya adalah untuk versi awal dari bootstrap. Sebagai bootstrap 2.3.0, anda hanya dapat memberikan div class .teks-center
.
Jawaban asli (pra 2.3.0)
Anda perlu menentukan salah satu dari dua kelas, baris
atau span12
dengan text-align: center
. Lihat
CATATAN: ini adalah dihapus di Bootstrap 3.
Pra-Bootstrap 3, anda bisa menggunakan CSS class pagination-berpusat
seperti ini:
<div class="span12 pagination-centered">
Centered content.
</div>
Kelas pagination-berpusat
sudah ada di bootstrap.css (atau bootstrap.min.css) dan memiliki hanya satu aturan:
.pagination-centered{text-align:center;}
Dengan Bootstrap 2.3.0. hanya menggunakan kelas text-pusat
Saya rasa sebagian besar dari orang-orang di sini yang benar-benar mencari cara untuk pusat seluruh div
dan tidak hanya konten teks (yang sepele...).
Cara kedua (bukan menggunakan text-align:center) pusat hal-hal dalam HTML memiliki elemen dengan lebar tetap dan auto margin (kiri dan kanan). Dengan Bootstrap, gaya mendefinisikan auto margin adalah "wadah" kelas.
<div class="container">
<div class="span12">
"Centered stuff there"
</div>
</div>
Lihat di sini untuk biola:
"Centered content" dapat berarti banyak hal yang berbeda, dan Bootstrap berpusat telah banyak berubah sejak posting asli.
Bootstrap 3
text-pusat
digunakan untuk display:inline
elemencenter
display:block` elemencol-*offset-*
ke center grid kolomDemo Bootstrap 3 Horizontal Centering
Bootstrap 4
text-pusat
masih digunakan untuk display:inline
elemenmx-auto
menggantikan pusat-blok
center display:block
elemenoffset-*
atau mx-auto
dapat digunakan untuk pusat grid kolommembenarkan-content-center
di baris
juga dapat digunakan untuk pusat col-*
mx-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
Sekarang bahwa Bootstrap 4 flexbox secara default ada banyak pendekatan yang berbeda untuk perataan vertikal menggunakan: auto-margin, flexbox utils, atau tampilan utils bersama dengan menyelaraskan vertikal utils. Pada awalnya "vertical-align utils" tampak jelas tetapi ini hanya bekerja dengan inline dan tampilan tabel elemen. Berikut ini adalah beberapa Bootstrap 4 vertikal berpusat pilihan..
1 - Vertical Center Menggunakan Auto Margin:
Cara lain untuk secara vertikal pusat adalah dengan menggunakan saya-auto
. Ini akan memusatkan elemen di dalamnya's kontainer. Misalnya, h-100
membuat baris ketinggian penuh, dan saya-auto
akan secara vertikal pusat col-sm-12 kolom
.
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
Vertikal Pusat Menggunakan Auto Margin Demo
saya-auto
mewakili margin pada vertikal sumbu-y dan setara dengan:
margin-top: auto;
margin-bottom: auto;
2 - Vertical Center dengan Flexbox:
Sejak Bootstrap 4 .baris
sekarang display:flex
anda hanya dapat menggunakan menyelaraskan diri-center
pada setiap kolom untuk vertikal pusat itu...
<div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
atau, gunakan menyelaraskan item-pusat
seluruh .baris
untuk vertikal pusat menyelaraskan semua col-*
di baris...
<div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
Vertikal Pusat yang Berbeda Ketinggian Kolom Demo
3 - Pusat Vertikal Menggunakan Tampilan Utils:
Bootstrap 4 memiliki tampilan utils yang dapat digunakan untuk display:table
, display:table-cell
, display:inline
, dll. Ini dapat digunakan dengan vertikal keselarasan utils untuk menyelaraskan inline skate, inline-block atau sel tabel elemen.
<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>
Bootstrap 3.1.1 memiliki .pusat-blok
kelas untuk centering div. Lihat: http://getbootstrap.com/css/#helper-classes-center.
Pusat blok konten Mengatur elemen untuk
display: block
dan pusat melaluimargin
. Tersedia sebagai mixin dan kelas.
<div class="center-block">...</div>
Atau, sebagai orang lain telah mengatakan, gunakan .teks-center
kelas ke tengah teks.
Cara terbaik untuk melakukan ini adalah mendefinisikan style css:
.centered-text {
text-align:center
}
Maka di mana pun anda perlu berpusat pada teks yang anda tambahkan seperti:
<div class="row">
<div class="span12 centered-text">
<h1>Bootstrap starter template</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div>
</div>
atau jika anda hanya ingin tag p berpusat pada:
<div class="row">
<div class="span12 centered-text">
<h1>Bootstrap starter template</h1>
<p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div>
</div>
Kurang inline css yang anda gunakan lebih baik.
Pada februari 2013, dalam beberapa kasus, saya tambahkan "berpusat" kelas "span" div:
<div class="container">
<div class="row">
<div class="span9 centred">
This div will be centred.
</div>
</div>
</div>
dan untuk CSS:
[class*="span"].centred {
margin-left: auto;
margin-right: auto;
float: none;
}
Alasan untuk ini adalah karena rentang* div's mendapatkan melayang ke kiri, dan "auto margin" berpusat teknik ini bekerja hanya jika div tidak melayang.
Demo (di JSFiddle):
JSFiddle: http://jsfiddle.net/5RpSh/8/
Jika anda menggunakan Bootstrap 3, ia juga memiliki built-in kelas CSS yang bernama .teks-center. Yang's apa yang anda inginkan.
<div class="text-left">
left
</div>
<div class="text-center">
center
</div>
<div class="text-right">
right
</div>
Silakan lihat contoh di jsfiddle.
Di sisi saya, saya mendefinisikan baru CSS
gaya siap untuk digunakan dan mudah untuk diingat:
.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/
.fright { float: right;} /*-> similar to .pull-right already existing in bootstrap*/
.vab { vertical-align: bottom;}
.bold { font-weight: bold;}
.italic { font-style: italic;}
Itu ide yang baik? Apakah ada praktek yang baik untuk ini?
Setiap text-align kelas utilitas akan melakukan trik. Bootstrap telah menggunakan .teks-center
kelas untuk centering teks untuk waktu yang lama sekarang.
.text-center { text-align: center !important; }
Atau anda dapat membuat anda sendiri utilitas. Beberapa variasi I've terlihat selama bertahun-tahun:
.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }
Anda perlu menyesuaikan dengan .span
.
Contoh:
<div class="container-fluid">
<div class="row-fluid">
<div class="span4"></div>
<!--/span-->
<div class="span4" align="center">
<div class="hero-unit" align="center">
<h3>Sign In</h3>
<form>
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i> </span>
<input class="span6" type="text" placeholder="Email address">
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-key"></i> </span>
<input class="span6" type="password" placeholder="Password">
</div>
</form>
</div>
</div>
<!-- /span -->
<div class="span4"></div>
</div>
<!-- /row -->
</div>
Untuk Bootstrap versi 3.1.1 dan atas, kelas terbaik untuk centering konten adalah .pusat-blok
penolong kelas.
Metode pilihan saya untuk centering blok dari informasi sementara mempertahankan daya tanggap (mobile kompatibilitas) adalah untuk menempatkan dua kosong span1
div sebelum dan setelah konten anda ingin ke pusat.
<div class="row-fluid">
<div class="span1">
</div>
<div class="span10">
<div class="hero-unit">
<h1>Reading Resources</h1>
<p>Read here...</p>
</div>
</div><!--/span-->
<div class="span1">
</div>
</div><!--/row-->
Anda dapat menggunakan salah satu dari berikut jenis
text-center
.style = "text-align:center"
.Contoh: <div class="col-md-offset-6 col-md-12"></div>
Pusat-blok juga merupakan pilihan yang tidak disebut di atas jawaban
<div class="center-block" style="width:200px;background-color:#ccc;">...</div>
Semua kelas pusat-blok
yang dilakukan adalah untuk memberitahu elemen untuk memiliki margin 0 auto, otomatis menjadi margin kiri/kanan. Namun, kecuali kelas text-pusat atau css text-align:center; diatur pada orang tua, elemen yang tidak tahu point untuk bekerja di luar auto perhitungan dari, sehingga tidak akan pusat sendiri seperti yang diharapkan.
Sehingga teks-center adalah pilihan yang lebih baik.
<div class="container">
<div class="col-md-12 centered">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
label
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
Jangan gunakan wadah-cairan di kantong.
Update 2018:
Di Bootstrap 4.1.3, konten dapat berpusat menggunakan class mx-auto
.
<div class="mx-auto">
Centered element
</div>
Referensi: https://getbootstrap.com/docs/4.1/utilities/spacing/#horizontal-centering