Bootstrap2 ile bir div nasıl ortalanır?

84

http://twitter.github.com/bootstrap/scaffolding.html

Tüm kombinasyonlar gibi denedim:

<div class="row">
  <div class="span7 offset5"> box </div>
</div>

veya

<div class="container">
  <div class="row">
    <div class="span7 offset5"> box </div>
  </div>  
</div>

aralık ve ofset numaraları değiştirildi ...

Ancak bir sayfada mükemmel bir şekilde ortalanmış basit bir kutu bulamıyorum :(

Ben sadece ortalanmış 6 sütun genişliğinde bir kutu istiyorum ...

Düzenle:

ile yaptım

<div class="container">
  <div class="row" id="login-container">
    <div class="span8 offset2">
       box
    </div>
  </div>
</div>

Ama kutu çok geniş, bunu span7 ile yapmamın bir yolu var mı?

span7 offset2sola span7 offset3ekstra dolgu verir, sağa fazladan dolgu verir ...

css twitter-bootstrap twitter-bootstrap-2

— Alex
kaynak

Bir kutuyu sayfada yatay olarak ortalamak mı istiyorsunuz? Çünkü containersınıf zaten yapar, daha küçük bir kutu ortalamak isteyen olabileceğini düşündüm. Yoksa bir kutuyu sayfada hem yatay hem de dikey olarak ortalamak mı istiyorsunuz?

— Andres Ilich

14

söylediğin bir kutu şey? . . . . geliştirici dünyasında buna div diyoruz

— pythonian29033

Bootstrap'in hangi sürümünü kullanıyordunuz? Bunu arayan insanlar burada sona erecek ve eski kodu görecekleri için başlıkta yansıtılmalıdır.

— JGallardo

46

şöyle açıklık boyutunu azaltarak, istediğiniz boyuta div kendisi küçülen yanında ... class="span6 offset3", class="span4 offset4"vb ... olarak basit olarak bir şey style="text-align: center"div üzerinde aradığınız etkisi olabilir

span7'yi herhangi bir set ofset ile kullanamazsınız ve aralığı sayfada ortalanmış olarak elde edemezsiniz (Çünkü toplam aralıklar = 12)

— Csturtz
kaynak

12

Zuhaib Ali'nin cevabını düşünün. text-align: center, bir <div> içindeki öğeleri ortalamak için çalışmaz. Ofset * sınıfı, bileşenleri gerçekten merkezleme değildir. Sadece merkezleme yanılsaması yaratıyor. Pencereyi yeniden boyutlandırarak ve bileşenlerin ortalanmış durumda kalmadığını görerek bunu doğrulayabilirsiniz. Zuhaib Ali'nin yöntemini uyguladığınızda bileşenler merkezde kalır.

— BigSauce

Satır içi stil eklemek yerine (style = "text-align: center"), "center-block" sınıfını ekleyin ve ortalanmış div içeriğinize ortalanmış içerik alın.

— Shawn Taylor

col-md-4 veya col-lg-4 bir marjına eşittir: 0 otomatik; ?

— jruzafa

165

Bootstrap'in aralıkları sola kayar. Onları ortalamak için tek gereken bu davranışı geçersiz kılmaktır. Bunu stil sayfama ekleyerek yapıyorum:

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

Bu sınıfı tanımladıysanız, sadece aralığa ekleyin ve gitmeniz iyi olur.

<div class="span7 center"> box </div>

Bu özel merkez sınıfının bootstrap css'den sonra tanımlanması gerektiğini unutmayın . Kullanabilirsin !importantama bu tavsiye edilmez.

— Zuhaib Ali
kaynak

5

EVET! Teşekkürler Zuhaib! Mükemmel çalıştı. Bu cevap, bu soruya doğru cevap olarak oylanmalıdır.

— BigSauce

@ZuhaibAli Ekleme float: none;sorunumu düzelt.

— SIFE

1

Rails kullanıyorum, bu yüzden sadece application.css'de şunu belirtmek istiyorum, *= require bootstrap.min önce ekleyin *= require_selfve*= require_tree

2

Bu benim için işe yaramadı, ancak eklemek display: tablesorunu çözdü

— Peter Berg

1

Mükemmel cevap! Bundan sonra bununla çalışıyorum.

— serv-bot 22

34

Bootstrap3 .center-blockkullanabileceğiniz sınıfa sahiptir. Olarak tanımlanır

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Belgeler burada .

— Casey
kaynak

20

Tam önyükleme yapmak istiyorsanız (ve otomatik sol / sağ yolu değil) 12 sütuna sığacak bir desene ihtiyacınız var, örneğin 2 boşluk, 8 içerik, 2 boşluk. Bu kurulumun yapacağı şey bu. Yalnızca -md- varyantlarını kapsar, col-xs-12 ekleyerek küçük için tam boyuta oturtma eğilimindeyim

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>

— Craig
kaynak

bu, boostrap'ta div'leri ortalamanın geçerli bir yolu mu?

— Gavindra Kalikapersaud

1

Div'in içeriği ortalanmamış, ancak div'in kendisi.

— Craig

8

Görünüşe göre tek bir kabı ortaya hizalamak istediniz. Önyükleme çerçevesi, bir örnekte aşırı karmaşık olabilir, kendi stilinize sahip bağımsız bir div'e sahip olabilirsiniz, örneğin:

<div class="login-container">
  <!-- Your Login Form -->
</div>

ve stil:

.login-container {
  margin: 0 auto;
  width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}

Bir bootstrap .containerdiv içinde bir yerde yuvalanmışsanız, bu iyi çalışacaktır .

— cstrat
kaynak

3

sınıf merkezi içeriğini ekle

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}

— mrpix
kaynak

0

@ZuhaibAli kodu benim için biraz çalışıyor ama biraz değiştirdim:

Css'de yeni bir sınıf oluşturdum

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

sonra div olur

<div class="center col-md-6"></div>

Div'in kendisinin genişliği için col-md-6 ekledim, bu durumda div boyutunun yarısıdır, bootstrap'ta 1-12 col md var.

— Jakson
kaynak

0

Bu kılavuzu izleyin https://getbootstrap.com/docs/3.3/css/

Kullanım .center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

— çekirdek114
kaynak

0

sınıf ile bir üst div div sarın rowardından stil eklemek margin:0 auto;div'e

<div class="row">
  <div style="margin: 0 auto;">center</div>
</div>

— Mahmud Farahat
kaynak