Bagaimana Anda mendapatkan konten yang terpusat menggunakan Twitter Bootstrap?

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?

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/

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

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/

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:

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

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.

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.

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.

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/

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/

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>

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?

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>

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

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>

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

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

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

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.

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>

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

.container {
    alignment-adjust: central;
}

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>

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:

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.

Pembaruan 2018:

Di Bootstrap 4.1.3 , konten dapat dipusatkan menggunakan kelas mx-auto.

<div class="mx-auto">
  Centered element
</div>

Referensi: https://getbootstrap.com/docs/4.1/utilities/spacing/#horizontal-centering