Twitter Bootstrap'ı kullanarak nasıl ortalanmış içerik elde edersiniz?

Çok temel bir örneği takip etmeye çalışıyorum. Kullanılması marş sayfası ve ızgara sistemini , ben aşağıdakileri umuyordum:

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

... ortalanmış metin üretirdi.

Ancak, yine de en solda görünür. Neyi yanlış yapıyorum?

Bu Metin Merkezleme içindir ( sorunun konusu buydu )

Diğer içerik türleri için Flavien'in cevabına bakınız .

Güncelleme: Bootstrap 2.3.0+ Yanıt

Orijinal cevap, bootstrap'ın erken bir versiyonuydu. Bootstrap 2.3.0'dan itibaren div'i sınıfa verebilirsiniz.text-center .

Orijinal Yanıt (ön 2.3.0)

İki sınıftan birini rowveya a span12ile tanımlamanız gerekir text-align: center. Bkz. Http://jsfiddle.net/xKSUH/ veya http://jsfiddle.net/xKSUH/1/

NOT: bu Bootstrap 3'te kaldırılmıştır .

Bootstrap 3 öncesi CSS sınıfını şu şekilde kullanabilirsiniz pagination-centered:

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

Sınıf pagination-centeredzaten bootstrap.css (veya bootstrap.min.css) içindedir ve tek kuralı vardır:

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

İle Bootstrap 2.3.0. sadece sınıfı kullantext-center

Sanırım buradaki insanların çoğu aslında sadece metin içeriğini değil (önemsiz…) bütünü ortalamanındiv yolunu arıyor .

HTML'de bir şeyleri ortalamak için ikinci yol (text-align: center kullanmak yerine), sabit genişliğe ve otomatik kenar boşluğuna (sol ve sağ) sahip bir öğeye sahip olmaktır. Bootstrap ile otomatik kenar boşluklarını tanımlayan stil "container" sınıfıdır.

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

Bir keman için buraya bakın: http://jsfiddle.net/D2RLR/7788/

Güncelleme 2019 - Bootstrap 4

"Ortalanmış içerik" birçok farklı anlama gelebilir ve Bootstrap merkezlemesi orijinal gönderiden bu yana çok değişti.

Yatay Merkez

Önyükleme 3

• text-centerdisplay:inlineelemanlar için kullanılır
• center-blockmerkezi için display:blockelemanların
• col-*offset-* ızgara sütunlarını ortalamak için
• gezinme çubuğunu ortalamak için bu cevaba bakın

Demo Bootstrap 3 Yatay Merkezleme

Bootstrap 4

• text-centerhala display:inlineelemanlar için kullanılıyor
• mx-autocenter-blockmerkez display:blockelemanların yerini alır
• offset-* veya mx-auto ızgara sütunlarını ortalamak için kullanılabilir
• justify-content-centerin rowmerkezlemek için de kullanılabilircol-*

mx-auto(otomatik x ekseni marjları) merkezi olacak display:blockya da display:flexbir olan elemanlar , belirlenmiş genişliğe , ( %, vw, px, vs ..). Flexbox ızgara sütunlarında varsayılan olarak kullanılır , bu nedenle çeşitli flexbox merkezleme yöntemleri de vardır.

Demo Bootstrap 4 Yatay Merkezleme

Dikey Orta

Bootstrap 4 artık varsayılan olarak flexbox olduğundan, dikey hizalamaya birçok farklı yaklaşım vardır: otomatik kenar boşlukları , flexbox araçları veya ekran yardımcıları ve dikey hizalama yardımcıları . İlk başta "dikey hizalama araçları" açık görünüyor ancak bunlar yalnızca satır içi ve tablo görüntüleme öğeleriyle çalışıyor. İşte bazı Bootstrap 4 dikey merkezleme seçenekleri ..

1 - Otomatik Kenar Boşluklarını Kullanarak Dikey Merkez:

Dikey olarak merkezlemenin başka bir yolu da kullanmaktır my-auto. Bu, öğeyi kabının içinde ortalar. Örneğin h-100, satırı tam yüksekliğe getirir my-autove col-sm-12sütunu dikey olarak ortalar.

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

Otomatik Kenar Boşlukları Demosunu Kullanarak Dikey Merkez

my-auto dikey y eksenindeki kenar boşluklarını temsil eder ve şunlara eşdeğerdir:

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

2 - Flexbox'lı Dikey Merkez:

Bootstrap 4 yana .rowartık display:flexsadece kullanabilirsiniz align-self-centerdikey ortalamak için herhangi bir sütun üzerinde ...

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

veya satırın align-items-centertamamını .rowdikey olarak ortalamak için tümünü kullanın col-*...

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

Dikey Merkez Farklı Yükseklik Sütunları Demosu

3 - Display Utils Kullanarak Dikey Merkez:

Özyükleme 4 olan görüntü utils'i için kullanılabilir display:table, display:table-cell, display:inline, vs .. Bu kullanılabilen dikey hizalama utils hizalama satır içi, sıralı blok veya tablo hücre elemanları.

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

Display Utils Demosunu Kullanarak Dikey Merkez

Bootstrap 3.1.1 , .center-blockdiv'ları merkezlemek için bir sınıfa sahiptir . Bkz . Http://getbootstrap.com/css/#helper-classes-center .

İçerik bloklarını ortala Bir öğeyi olarak display: blockve ortalayarak ayarlayın margin. Mixin ve sınıf olarak mevcuttur.

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

Veya, diğerlerinin söylediği gibi, .text-centermetni ortalamak için sınıfı kullanın.

Bunu yapmanın en iyi yolu bir css stili tanımlamaktır:

.centered-text {
    text-align:center
}    

O zaman ortalanmış metne ihtiyacınız olan her yerde şöyle eklersiniz:

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

veya yalnızca p etiketinin ortalanmasını istiyorsanız:

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

Ne kadar az satır içi css kullanırsanız o kadar iyi olur.

.Show-grid sınıfı, bağlantıdaki örnekte ortaya hizalanmış metin uyguluyor.

Sen her zaman style="text-align:center"senin satır div ya da düşünmek istiyorum başka bir sınıf ekleyebilirsiniz .

Şubat 2013 itibariyle, bazı durumlarda, "span" div öğesine "ortalanmış" bir sınıf ekliyorum:

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

ve CSS'ye:

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

Bunun nedeni, yayılma alanı * div'ın sola süzülmesidir ve "otomatik kenar boşluğu" merkezleme tekniği yalnızca div süzülmediğinde çalışır.

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

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

Bootstrap 3 kullanıyorsanız, aynı zamanda .text-center adlı yerleşik CSS sınıfına da sahiptir . İstediğin bu.

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

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

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

Lütfen jsfiddle'daki örneğe bakın. http://jsfiddle.net/ucheng/Q4Fue/

Bootstrap 2.3'ün bir text-centersınıfı var.

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

Yanımda CSS, kullanıma hazır ve hatırlaması kolay yeni stiller tanımlarım :

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

İyi bir fikir mi? Bunun için iyi bir uygulama var mı?

Bootstrap 2.0+ kullanıyorsanız

Bu, div'in sayfaya ortalanmasını sağlayabilir.

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

Herhangi bir metin hizalama yardımcı programı sınıfı işe yarayacaktır. Bootstrap, .text-centermetni uzun süredir ortalamak için sınıfı kullanıyor .

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

Veya kendi yardımcı programlarınızı oluşturabilirsiniz. Yıllar boyunca gördüğüm bazı varyasyonlar:

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

İle ayarlamanız gerekir .span.

Misal:

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

Duyarlılığı korurken (mobil uyumluluk) bilgi bloklarını ortalamak için tercih ettiğim yöntem, ortalamak span1istediğiniz içeriğin önüne ve arkasına iki boş div yerleştirmektir .

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

Bootstrap sürüm 3.1.1 ve üstü için, içeriği ortalamak için en iyi sınıf .center-blockyardımcı sınıftır.

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

Ana kapta sıvı kullanmayın.

Merkez blok ayrıca yukarıdaki cevaplarda belirtilmeyen bir seçenektir

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

Tüm sınıf center-block yaptığı tek şey öğeye 0 otomatik kenar boşluğuna sahip olmasını söylemek, otomatik sol / sağ kenar boşluklarıdır. Ancak, sınıf text-center veya css text-align: center; öğesi üst öğeye ayarlandığında, öğe bu otomatik hesaplamayı gerçekleştirme noktasını bilmez, bu nedenle kendisini beklendiği gibi ortalamaz.

Dolayısıyla metin merkezi daha iyi bir seçenektir.

Aşağıdaki türlerden herhangi birini kullanabilirsiniz

1. Varolan Bootstrap sınıfını kullanın text-center.
2. Özel bir stil eklemek, style = "text-align:center" ,.

3. Bir sütun kayması kullanın:

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

Duyarlı özellikleri korurken ekran boyutundan bağımsız olarak ortalamayı korumak için bu sınıfı oluşturdum:

.container {
    alignment-adjust: central;
}

İstediğiniz div veya etiket için metin merkezli bir sınıf kullanmanız yeterlidir. Bence işe yarayabilir. Metin hizalama merkezi için bir Bootstrap sınıfıdır.

İşte bazı metin hizalama Bootstrap sınıfları:

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>

İki yol denedim ve div'ı ortalamak iyi çalıştı. Her iki yol da div'ları tüm ekranlarda hizalar.

Yol 1: Push'u kullanma:

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

Yol 2: Ofseti Kullanma:

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

Sonuç:

açıklama

Önyükleme, belirtilen ekran doluluğunun ilk sütunu olan solda belirtilir. Ofset veya itme kullanırsak, 'bu' sütunu 'o' sütununa kaydırır. Ofset duyarlılığında bazı sorunlarla karşılaşmama rağmen, itme harikaydı.

Güncelleme 2018:

Gelen Bootstrap 4.1.3 , içerik sınıfı kullanılarak merkezlenebilir mx-auto.

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

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