Bagaimana Anda mendapatkan konten yang terpusat menggunakan Twitter Bootstrap?


569

Saya mencoba mengikuti contoh yang sangat mendasar. Menggunakan halaman starter dan sistem grid , saya berharap yang berikut:

<div class="row">
  <div class="span12">
    <h1>Bootstrap starter template</h1>
    <p>Example text.</p>
  </div>
</div>

... akan menghasilkan teks yang terpusat.

Namun, masih muncul di paling kiri. Apa yang saya lakukan salah?


5
apakah Anda ingin teks di dalam '<div class = "span12">' centered, atau Anda ingin keseluruhan '<div class = "row">' div dipusatkan di jendela browser?
NerdFury


3
@Chloe orang yang peduli tentang kompatibilitas HTML. <center>tidak digunakan lagi text-align: center, yang kebetulan adalah apa yang .text-centerdibungkus oleh kelas bootstrap .
jmoss

Jika Anda menggunakan Bootstrap 4, lihat: stackoverflow.com/questions/42388989/…
Zim

Jawaban:


690

Ini untuk Text Centering ( pertanyaan tentang apa itu )

Untuk jenis konten lain, lihat jawaban Flavien .

Pembaruan: Bootstrap 2.3.0+ Jawab

Jawaban asli adalah untuk versi awal bootstrap. Pada bootstrap 2.3.0, Anda cukup memberikan div kelas.text-center .


Jawaban Asli (pra 2.3.0)

Anda perlu mendefinisikan salah satu dari dua kelas, rowatau span12dengan a text-align: center. Lihat http://jsfiddle.net/xKSUH/ atau http://jsfiddle.net/xKSUH/1/


2
Saya sudah mencoba ini untuk kedua baris, dan span12, tetapi meja saya di dalam span12, di dalam baris selalu berada di sebelah kiri. Menambahkan padding memindahkannya ke tengah, tapi saya ingin memusatkannya dengan cara yang responsif. Dapatkah saya melakukan pengisian otomatis?
ATSiem

Saya melihat bahwa ini berfungsi tetapi mengapa kita harus mendefinisikannya. Apakah ini belum didefinisikan? Saya hanya berbicara tentang teks ....
Akshat Jiwan Sharma

@ AkshatJiwanSharma - kelas didefinisikan, tetapi terakhir saya melihat, text-align: centertidak standar pada kelas tersebut. Biasanya defaultnya adalah leftalignment.
ScottS

untuk pra 2.3.0 .pagination-centeredjuga berfungsi: P menghemat Anda penekanan tombol menambahkan kelas lain.
Sarim

@Sarim: Sebenarnya, pagination-centeredAnda harus menambahkan kelas lain ke html. Jawaban pra-2.3.0 saya hanya membutuhkan satu untuk memperluas definisi properti dari kelas yang sudah ada. Juga, jika Anda melihat komentar pada jawaban menggunakan pagination-centered, Anda akan menemukan beberapa keberatan dan peringatan terkait dengan itu. Tetapi jika itu berhasil untuk Anda dalam kasus Anda - pergilah! :-)
ScottS

240

CATATAN: ini dihapus dalam Bootstrap 3 .


Pra-Bootstrap 3, Anda dapat menggunakan kelas CSS pagination-centeredseperti ini:

<div class="span12 pagination-centered">
    Centered content.
</div>

Kelas pagination-centeredsudah ada di bootstrap.css (atau bootstrap.min.css) dan hanya memiliki satu aturan:

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

Dengan Bootstrap 2.3.0. cukup gunakan kelastext-center


41
Saya tidak akan menyarankan menggunakan ini sebagai sangat spesifik untuk pagination (seperti yang disimpulkan dari classname). Mungkin berbenturan dengan gaya yang Anda terapkan pada pagination dan mungkin tidak kompatibel dengan pembaruan di masa depan jika bootstrap memutuskan bahwa kelas ini perlu melakukan lebih banyak untuk pagination terpusat.
Dayson

4
@ lurii.k Ini membuat SEMUA yang terpusat, termasuk anak-anak. Bagaimana jika kita hanya ingin menyelaraskan wadah luar tetapi semua yang ada di dalamnya sejajar kiri?
gatzkerob

1
Dengan bootstrap 2.3.0. cukup gunakan css class .text-center
Iurii.K

Jawaban terbaik sejauh ini! Bekerja dengan bootstrap 2.3.2
jQuery00

4
Tampaknya Bootstrap 3.0.0 telah menghapus kelas ini. Menggunakan .text-centerpada induk adalah solusi yang tepat untuk versi ini.
Blazemonger

152

Saya kira sebagian besar orang di sini sebenarnya mencari cara untuk memusatkan keseluruhandiv dan tidak hanya konten teks (yang sepele ...).

Cara kedua (alih-alih menggunakan text-align: center) untuk memusatkan hal-hal dalam HTML adalah memiliki elemen dengan lebar tetap dan margin otomatis (kiri dan kanan). Dengan Bootstrap, margin definisi gaya otomatis adalah kelas "wadah".

<div class="container">
    <div class="span12">
        "Centered stuff there"
    </div>
</div>

Lihatlah biola di sini: http://jsfiddle.net/D2RLR/7788/


9
Ini adalah jawaban yang benar, sebagaimana didokumentasikan secara resmi di sini: twitter.github.com/bootstrap/scaffolding.html#layouts
Qlimax

2
@Qlimax Tautan Anda tampaknya rusak, saya pikir ini yang Anda inginkan untuk 2.3.2: getbootstrap.com/2.3.2/scaffolding.html#layouts
Chris

1
@Sebastialonso Saya baru saja memperbaiki ketergantungan yang sudah usang, terima kasih telah melaporkan masalah ini
Flavien Volken

Ini tidak akan berfungsi jika Anda ingin memusatkan kolom. Untuk memusatkan kolom kotak, gunakan col-*offset-*. misalnya <div class="col-10 offset-1">atau<div class="col-8 offset-2">
sgon00

47

Pembaruan 2019 - Bootstrap 4

"Konten terpusat" dapat berarti banyak hal yang berbeda, dan pemusatan Bootstrap telah banyak berubah sejak posting asli.

Pusat Horisontal

Bootstrap 3

  • text-centerdigunakan untuk display:inlineelemen
  • center-blockuntuk display:blockelemen pusat
  • col-*offset-* ke pusat kolom kotak
  • lihat jawaban ini untuk memusatkan navbar

Demo Bootstrap 3 Pemusatan Horizontal

Bootstrap 4

  • text-centermasih digunakan untuk display:inlineelemen
  • mx-automenggantikan elemen center-blockpusatdisplay:block
  • offset-* atau mx-auto dapat digunakan untuk memusatkan kolom kotak
  • justify-content-centerdi rowjuga bisa digunakan untuk pusatcol-*

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


Pusat Vertikal

Sekarang karena Bootstrap 4 adalah flexbox secara default, ada banyak pendekatan berbeda untuk penyelarasan vertikal dengan menggunakan: margin otomatis , utilitas flexbox , atau utilitas tampilan bersama dengan utilitas penyelarasan vertikal . Pada awalnya "utilitas penyelarasan vertikal" tampak jelas tetapi ini hanya bekerja dengan elemen tampilan inline dan tabel. Berikut adalah beberapa opsi pemusatan vertikal Bootstrap 4 ..


1 - Pusat Vertikal Menggunakan Margin Otomatis:

Cara lain untuk memusatkan secara vertikal adalah menggunakan my-auto. Ini akan memusatkan elemen di dalam wadahnya. Misalnya, h-100buat baris menjadi tinggi penuh, dan my-autoakan memusatkan col-sm-12kolom secara vertikal .

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Pusat Vertikal Menggunakan Demo Margin Otomatis

my-auto mewakili margin pada sumbu y vertikal dan setara dengan:

margin-top: auto;
margin-bottom: auto;

2 - Pusat Vertikal dengan Flexbox:

kolom kotak tengah vertikal

Karena Bootstrap 4 .rowsekarang display:flexAnda cukup menggunakan align-self-centerpada kolom apa saja untuk memusatkan secara vertikal ...

       <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 align-items-centerpada keseluruhan .rowuntuk mensejajarkan semua col-*baris secara vertikal ...

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

Demo Vertikal Pusat Ketinggian Berbeda


3 - Pusat Vertikal Menggunakan Peralatan Display:

Bootstrap 4 memiliki layar util yang dapat digunakan untuk display:table, display:table-cell, display:inline, dll .. ini dapat digunakan dengan utils vertical alignment untuk inline menyelaraskan, inline-blok atau elemen sel tabel.

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

Pusat Vertikal Menggunakan Demo Display Utils


Saat menggunakan tata letak Grid, saya menemukan bahwa hanya kombinasi css berikut yang secara horizontal & vertikal akan menyelaraskan div di dalam kolom sehingga ketinggian maksimum kolom juga cocok dengan kolom terbesar di baris yang sama. .className-of-inner-div { display: inline-block; text-align: left; padding-top: 25%; padding-bottom: 20%; margin-top: auto; margin-bottom: auto; } .className-of-Grid-column { vertical-align:middle; text-align: center; }
user3188040

Terima kasih banyak. Ini menyelesaikan masalah saya.
sgon00

Saya akan mendukung setiap demo jika saya bisa. Mereka hebat. :) Terima kasih banyak!
Pascal

36

Bootstrap 3.1.1 memiliki .center-blockkelas untuk divs centering. Lihat: http://getbootstrap.com/css/#helper-classes-center .

Blok konten tengah Setel elemen ke display: blockdan pusatkan via margin. Tersedia sebagai mixin dan kelas.

<div class="center-block">...</div>

Atau, seperti yang telah dikatakan orang lain, gunakan .text-centerkelas untuk memusatkan teks.


29

Cara terbaik untuk melakukan ini adalah mendefinisikan gaya css:

.centered-text {
    text-align:center
}    

Lalu di mana pun Anda membutuhkan teks terpusat Anda menambahkannya seperti ini:

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

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

Semakin sedikit inline css yang Anda gunakan, semakin baik.


Bagus, saya menggunakan ini untuk memusatkan tombol-tombol dalam footer Bootstrap Modal.
Giant Elk

13

Kelas .show-grid menerapkan teks rata tengah dalam contoh di tautan.

Anda selalu dapat menambahkan style="text-align:center"div baris Anda atau kelas lain yang saya pikir.


4
menambahkan gaya inline seperti ini sering dianggap praktik buruk
Spencer Williams

2
Saya setuju, dan itulah mengapa saya juga mengatakan "atau kelas lain" :)
PAULDAWG

12

Pada Februari 2013, dalam beberapa kasus, saya menambahkan kelas "centered" ke div "span":

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

dan ke CSS:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

Alasan untuk ini adalah karena span * div's melayang ke kiri, dan teknik pemusatan "margin otomatis" hanya bekerja jika div tidak melayang.

Demo (di JSFiddle): http://jsfiddle.net/5RpSh/8/embedded/result/

JSFiddle: http://jsfiddle.net/5RpSh/8/


3
Ini adalah jawaban terbaik karena divnya terpusat dan masih responsif. Ini biola untuk demo. Yang ada di jawaban tidak bekerja: jsfiddle.net/r7Qgn/6
Rafi

9

Jika Anda menggunakan Bootstrap 3, ia juga memiliki kelas CSS bawaan bernama .text-center . Itu yang kamu mau.

<div class="text-left">
    left
</div>

<div class="text-center">
    center
</div>

<div class="text-right">
    right
</div>

Silakan lihat contoh di jsfiddle. http://jsfiddle.net/ucheng/Q4Fue/


8

Bootstrap 2.3 memiliki text-centerkelas.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

Tidak, itu hanya berfungsi untuk teks, pertanyaannya adalah tentang wadah utama
drmartin

"pertanyaannya adalah tentang wadah utama" Saya tidak melihat mengapa Anda mengklaim itu (dan melihat jawaban yang diterima)
leonbloy

5

Di pihak saya, saya mendefinisikan CSSgaya baru yang siap digunakan dan mudah 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;}

Apakah itu ide yang bagus? Apakah ada praktik yang baik untuk ini?


3
lereng licin. css seharusnya menghilangkan masalah styling dari struktur dokumen. Ini, meskipun secara tidak langsung, menambahkannya kembali. Mungkin TBS memberikan contoh yang buruk dengan mereka span12dan sejenisnya
ditulis

Saya setuju dengan komentar lereng yang licin. Saya juga menambahkan bahwa penggunaan Bootstrap Twitter sendiri bisa dibilang merupakan lereng yang licin.
Jason Swett

4

Jika Anda menggunakan Bootstrap 2.0+

Ini dapat membuat div terpusat ke halaman.

<div class="row">
    <div class="span4 offset4">
        //your content here gets centered of the page
    </div>
</div>

11
ini tidak memusatkan elemen. itu menempatkan sudut kiri atas elemen ke 4 kolom ke depan. centering berarti menempatkan pusat elemen yang tepat ke tengah elemen kontainer.
Cagatay Kalan

3

Setiap kelas utilitas perataan teks akan melakukan triknya. Bootstrap telah menggunakan .text-centerkelas untuk teks keterpusatan sejak lama.

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

Atau Anda dapat membuat utilitas sendiri. Beberapa variasi yang pernah saya lihat selama ini:

.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }

3
Bukan desain yang bagus karena pull-left dan pull-right memberi efek pada elemen yang diberikan kelas. pusat-tarik saat Anda mendefinisikan, efek anak-anak elemen.
Cagatay Kalan

3

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

2

Metode pilihan saya untuk memusatkan blok-blok informasi sambil mempertahankan daya tanggap (kompatibilitas seluler) adalah dengan menempatkan dua span1div kosong sebelum dan sesudah konten yang ingin Anda pusatkan.

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

2

Untuk Bootstrap versi 3.1.1 dan di atasnya, kelas terbaik untuk memusatkan konten adalah .center-blockkelas penolong.


ya itu wright sekarang sangat tema dan pengguna menggunakan versi bootstrap lebih besar dari 3.1.1
SAFEEN 1990

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


Anda memiliki centeredkelas dalam kode Anda yang akan membuat banyak kebingungan
bg17aw

pendekatan yang menarik, tetapi untuk css webform khusus saya, ini adalah pilihan yang baik.
JoshYates1980

1

Blok-tengah juga merupakan opsi yang tidak disebutkan dalam jawaban di atas

    <div class="center-block" style="width:200px;background-color:#ccc;">...</div>

Semua kelas center-blocklakukan adalah untuk memberitahu elemen untuk memiliki margin 0 auto, otomatis menjadi margin kiri / kanan. Namun, kecuali class text-center atau css text-align: center; diatur pada induknya, elemen tidak tahu gunanya menghitung perhitungan otomatis ini, sehingga tidak akan memusatkan dirinya seperti yang diharapkan.

Jadi pusat teks adalah pilihan yang lebih baik.


1

Anda dapat menggunakan salah satu dari jenis di bawah ini

  1. Gunakan kelas Bootstrap yang ada text-center.
  2. Menambahkan gaya khusus style = "text-align:center",.
  3. Gunakan offset kolom:

    Contoh: <div class="col-md-offset-6 col-md-12"></div>


0

Saya membuat kelas ini untuk menjaga bagian tengah terlepas dari ukuran layar sambil mempertahankan fitur responsif:

.container {
    alignment-adjust: central;
}

0

Cukup gunakan kelas, pusat teks, untuk div atau tag yang Anda inginkan. Saya pikir itu bisa berfungsi dengan baik. Ini adalah kelas Bootstrap untuk pusat perataan teks.

Berikut adalah beberapa kelas Bootstrap penyelarasan teks:

text-left, text-right, text-justify, etc.
<div class="row">
 <div class="col-md-12 text-center">
  <h1>Bootstrap starter template</h1>
  <p>Example text.</p>
 </div>
</div>

0

Saya mencoba dua cara, dan itu berfungsi dengan baik untuk memusatkan div. Kedua cara akan menyelaraskan divs di semua layar.

Cara 1: Menggunakan Push:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-push-4 col-md-push-4 col-sm-push-4 col-xs-push-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!-- To center this text, use style="text-align: center" -->
  </div>

Cara 2: Menggunakan Offset:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-offset-4 col-md-offest-4 col-sm-offest-4 col-xs-offest-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!--to center this text, use style="text-align: center"-->
</div>

Hasil:

Masukkan deskripsi gambar di sini

Penjelasan

Bootstrap akan menunjuk ke kiri, kolom pertama dari hunian layar yang ditentukan. Jika kita menggunakan offset atau push itu akan menggeser kolom 'ini' dengan 'banyak' kolom. Meskipun saya menghadapi beberapa masalah sebagai responsif offset, dorongan itu luar biasa.


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.