1146

Twitter Bootstrap 3'teki kapta (12 sütun) bir sütun boyutunda bir div'ı nasıl ortalayabilirim ?

.centered {
  background-color: red;
}

<body class="container">
  <div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
  </div>
</body>

Snippet'i genişlet

divBir sınıfın .centeredkap içinde ortalanmasını istiyorum . Birden fazla divs varsa bir satır kullanabilirim , ancak şimdilik sadece divkap içinde ortalanmış bir sütunun boyutuna sahip bir tane istiyorum (12 sütun).

Ayrıca yukarıdaki yaklaşımın yeterince iyi olmadığından da emin değilim, çünkü amaç divyarı yarıya dengelemek değil . Büzülme diviçeriği ve içeriği dışında divorantılı olarak boş alanlara ihtiyacım yok . I want div eşit dağılmasını dışında yer boş (tek sütun eşittir genişliği kabın kadar kısa).

— bsr
kaynak

1963

Bir sütunu <div>Bootstrap 3'te ortalamak için iki yaklaşım vardır :

Yaklaşım 1 (ofsetler):

İlk yaklaşım Bootstrap'ın kendi ofset sınıflarını kullanır, böylece işaretlemede değişiklik ve ekstra CSS gerektirmez. Anahtar, satırın kalan boyutunun yarısına eşit bir ofset ayarlamaktır . Örneğin, 2 büyüklüğünde bir sütun, 5 ofseti eklenerek ortalanır (12-2)/2.

İşaretlemede bu şöyle görünecektir:

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

Şimdi, bu yöntem için bariz bir dezavantaj var. Sadece hatta kolon boyutları için çalışır , bu yüzden sadece .col-X-2, .col-X-4, col-X-6, col-X-8, ve col-X-10desteklenmektedir.

Yaklaşım 2 (eski `margin:auto`)

Sen olabilir herhangi bir sütun boyutunu ortalamak kanıtlanmış kullanarak margin: 0 auto;tekniği. Sadece Bootstrap'ın ızgara sistemi tarafından eklenen yüzenlere dikkat etmeniz gerekir. Aşağıdaki gibi özel bir CSS sınıfı tanımlamanızı öneririm:

.col-centered{
    float: none;
    margin: 0 auto;
}

Şimdi herhangi bir ekran boyutunda herhangi bir sütun boyutuna ekleyebilirsiniz ve Bootstrap'in duyarlı düzeniyle sorunsuz bir şekilde çalışacaktır:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

Not: Her iki teknikle de .rowöğeyi atlayabilir ve sütunun a içinde ortalanmasını sağlayabilirsiniz .container, ancak kap sınıfındaki dolgu nedeniyle gerçek sütun boyutunda minimum bir fark görürsünüz.

Güncelleme:

V3.0.1 Bootstrap, center-blockkullanan margin: 0 autoancak eksik adlı yerleşik bir sınıfa float:nonesahip olduğundan, bunu ızgara sistemiyle çalışmasını sağlamak için CSS'nize ekleyebilirsiniz.

— koala_dev
kaynak

1

hiçbir şamandıra olduğunu düşünüyorum: hiçbiri orta blok kuralında kayanları temizlemek için öğelere ekleyebileceğiniz bir clearfix bağımsız kuralı var.

— Diego Fernando Murillo Valenci

7

@DiegoFernandoMurilloValenci .clearfixbu durumda çalışmaz çünkü elementlerdeki şamandıra özelliğini kaldırmaz (kullanarak ortalamak için gereklidir margin: 0 auto), sadece bir kabın içinde yüzen herhangi bir elemanı sarar

— koala_dev

4

bunu bir sütunda kullanamazsınız, çünkü hayırfloat:none;

— airtonix 28:15

2

Tek bir satırda birden fazla sütunu ortalamak istiyorsanız, şu cevaba bakın stackoverflow.com/questions/28683329/…

— Conor Svensson

3

Ofset sözdizimi Bootstrap4'te (en son sürümden itibaren) değişti. Bu yanıtı örnek olarak kullanarak: col-md-offset-5 sınıfı artık ofset-md-5 olmalıdır.

— lgants

296

Tercih edilen yöntem, sütun merkezleme "uzaklıklar" kullanmaktır (örn: col-md-offset-3)

Bootstrap 3.x merkezleme örnekleri

İçin merkezleme elemanlarının , bir var center-block yardımcı sınıfı .

Metni (ve satır içi öğeleri) ortalamak text-centeriçin de kullanabilirsiniz .

Demo : http://bootply.com/91632

EDIT - Yorumlarda belirtildiği gibicenter-block, sütun içeriği vedisplay:blocköğeleriüzerinde çalışır, ancakcol-*Bootstrap kullandığıiçin sütunun kendisi (div)üzerinde çalışmazfloat.

2018 Güncellemesi

Şimdi ile Bootstrap 4 , ortalama yöntemleri değişti ..

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

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

BS4'te dikey merkezleme için bkz. Https://stackoverflow.com/a/41464397/171456

— Zim
kaynak

31

Ne yazık ki bu yardımcı sınıf, float özelliğine dikkat etmediğinden sütun sistemiyle çalışmaz. Örneğin bu demoya bakın .

— koala_dev

13

Bu sadece bir merkez bloğu gerektirir {float: none; }, ve çalışıyor. bootyol.com/122268

— Matias Vad

5

OP hakkında emin değilim, ama burada text-centerdiğer cevapların hiçbiri sağlanan detay - arıyorum . Bu benim oyumu alır.

— domoarigato

1

bunu bir sütunda kullanamazsınız, çünkü hayırfloat:none;

— airtonix 28:15

98

Şimdi Bootstrap 3.1.1 ile çalışıyor .center-blockve bu yardımcı sınıf sütun sistemi ile çalışıyor.

Bootstrap 3 Yardımcı Sınıf Merkezi .

Lütfen bu jsfiddle DEMO'yu kontrol edin :

<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>

Yardımcı sınıf merkezi

col-center-blockYardımcı sınıfı kullanarak satır sütun merkezi .

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}

— Gönderen
kaynak

float:noneDiv center-block'un style="width : ?px"stilin uygulandığından emin olarak eklemeden bu çalışmayı aldım . Örneğin bir görüntü genişliği. 3.2.2 ile çalışır

— Piotr Kula

kenar boşluğu: 0 otomatik; - yeterli yerine kenar boşluğu-sol + kenar boşluğu

— mmike

57

Özel CSS dosyanıza aşağıdakileri eklemeniz yeterlidir. Bootstrap CSS dosyalarını doğrudan düzenlemek önerilmez ve CDN kullanma yeteneğinizi iptal eder .

.center-block {
    float: none !important
}

Neden?

Bootstrap CSS (sürüm 3.7 ve önceki sürümler) kenar boşluğu kullanır : 0 otomatik; , ancak boyut kabının float özelliği tarafından geçersiz kılınır.

PS :

Bu sınıfı ekledikten sonra, sınıfları doğru sıraya göre ayarlamayı unutmayın.

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

— Sagive SEO
kaynak

1

Bootstrap kullanıyorum 3.3.7ve bu benim için çalışan tek yöntem!

— illagrenan

1

bu çalışıyor. ama !importantgerekli olduğunu düşünmeyin

— Gianfranco P.

1

@GianfrancoP. P. Hakkınız, ama ... bu yük sırasına bağlıdır ve kusursuz bir yöntem sağlamak istedim.

— Sagive SEO

39

Bootstrap 3 şimdi bunun için yerleşik bir sınıfa sahip.center-block

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

Hala 2.X kullanıyorsanız, bunu sadece CSS'nize ekleyin.

— Schmalzy
kaynak

bu muhtemelen size istenen etkiyi en kolay şekilde verecektir. Ayrıca .centered sınıfına genişlik atın veya daha modüler bir yaklaşıma gidiyorsanız ikinci bir sınıf ekleyin

— Matt Lambert

2

Şamandıra ekleme: yok; to .centered, sınıfı kabın içine taşımanıza olanak tanır. kodu temiz tutar

— Adam Patterson

7

Bunu bir sütunda kullanamazsınız, çünkü hayırfloat:none;

— airtonix

37

Orta sütunlara yaklaşımım display: inline-blocksütunlar vetext-align: center kapsayıcı üst .

Sadece 'ortalanmış' CSS sınıfını row .

HTML:

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

CSS:

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

JSFiddle: http://jsfiddle.net/steyffi/ug4fzcjd/

— Steffi
kaynak

2

Bu, zamanın% 100'ünde çalışan tek cevaptır - Diğerleri çalıştı, ancak bootstrap mobil görünümüne geçtiğinde değil (öğeler sol tarafa taşındı).

— Levi Fuller

Bu da beni çalıştıran tek şeydi, .center-block sadece bir sütun için çalışıyor ve tüm sütunları kaç tane olduğundan bağımsız olarak ortalamam gerekiyor.

— cjohansson

Sadece benim için de işe yarayan bir çözüm. Diğerleri sadece tarayıcı bir pencere olduğunda çalıştı (tam ekran değil).

— kiwicomb123

26

Bootstrap sürüm 3, bir .text-center sınıfına sahiptir.

Sadece bu sınıfı ekleyin:

text-center

Sadece bu stili yükleyecektir:

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

Misal:

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>

— RustyIngles
kaynak

Bu sınıfın nereye ekleneceğini netleştirmek ister misiniz?

— aksu

Merhaba @aksu, .css eklemenize gerek yok. Verilen örneğe bakın.

— JoshYates1980

21

Bootstrap v4 ile bu sadece ekleyerek gerçekleştirilebilir .justify-content-centeriçin.row <div>

<div class="row justify-content-center">
    <div class="col-1">centered 1 column</div>
</div>

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

— joknawe
kaynak

15

Bu çalışıyor. Muhtemelen hackish bir yol, ama güzel çalışıyor. Duyarlı (Y) için test edilmiştir.

.centered {
    background-color: teal;
    text-align: center;
}

Masaüstü

duyarlı

— Ali Gajani
kaynak

yalnızca öğenin satır içinde satır sonu olması nedeniyle çalışır. Bir imgblok olarak ayarlanabilir.

— ProfileTwist

Belki izole edilmiş test durumunuzda. Ben eklersiniz .centered img { display: inline; }cevabınıza ve sonra yerine kadar oyu layık olurdu.

— ProfileTwist

Sorun değil. Ben OP onun cevabını bulacağından eminim :)

— Ali Gajani

bootstrap 3'te, .text-center sınıfı yukarıda öğrendiğim gibi aynı şeyi doğal olarak yapıyor.

— domoarigato

7

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>

— wali
kaynak

6

Sütunu ortalamak için aşağıdaki kodu kullanmamız gerekir. cols margin auto dışında floater elementleridir. Ayrıca hiçbirini yüzdürmeyecek şekilde ayarlayacağız,

<body class="container">
    <div class="col-lg-1 col-md-4 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Yukarıdaki col-lg-1'i ortalanmış sınıfla ortalamak için şunu yazacağız:

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

İçeriği div içinde ortalamak için text-align:center,

.centered {
    text-align: center;
}

Mobilde değil, yalnızca masaüstünde ve daha büyük ekranda ortalamak istiyorsanız, aşağıdaki medya sorgusunu kullanın.

@media (min-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

Ve div'ı yalnızca mobil sürümde ortalamak için aşağıdaki kodu kullanın.

@media (max-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

— Aamer Shahzad
kaynak

6

İçeriği görüntüleyen bir sütunu col-xs-12 (mobile-first ;-) olarak ayarlayın ve kapsayıcıyı yalnızca ortalanmış içeriğinizin ne kadar geniş olmasını istediğinizi kontrol edecek şekilde yapılandırın;

.container {
  background-color: blue;
}
.centered {
    background-color: red;
}

<body class="container col-xs-offset-3 col-xs-6">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Snippet'i genişlet

<body class="container col-xs-offset-1 col-xs-10">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Snippet'i genişlet

Bir demo için bkz. Http://codepen.io/Kebten/pen/gpRNMe :-)

— Kieran Ryan
kaynak

6

Dengelemenin başka bir yaklaşımı, iki boş satıra sahip olmaktır, örneğin:

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>

— LeRoy
kaynak

1

2 yararsız

— div

1

Katılıyorum. Bu yöntemi kullandım çünkü gerçekten iyi çalışıyor ve test edildi.

— LeRoy

6

text-centerSatır için kullanabilir ve dahili div'lerin display:inline-block(değil ile float) olduğundan emin olabilirsiniz .

Gibi:

<div class="container">
    <div class="row text-center" style="background-color : black;">
        <div class="redBlock">A red block</div>
        <div class="whiteBlock">A white block</div>
        <div class="yellowBlock">A yellow block</div>
    </div>
</div>

Ve CSS:

.redBlock {
    width: 100px;
    height: 100px;
    background-color: aqua;
    display: inline-block
}
.whiteBlock {
    width: 100px;
    height: 100px;
    background-color: white;
    display: inline-block
}
.yellowBlock {
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: inline-block
}

Keman: http://jsfiddle.net/DTcHh/3177/

— Alireza Fattahi
kaynak

6

Bootstrap 4 ile buradajustify-content-md-center belirtildiği gibi deneyebilirsiniz

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">
              1 of 3
        </div>
        <div class="col-md-auto">
            Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col">
             1 of 3
        </div>
        <div class="col-md-auto">
                Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
</div>

— Hossein Narimani Rad
kaynak

1

@AdamErickson Soru özellikle bir bootstrap 3 çözümü istedi. Bu cevap muhtemelen

— BS4'e girmenin

5

Bu muhtemelen en iyi cevap değildir, ancak bunun için daha yaratıcı bir çözüm var. Koala_dev'in işaret ettiği gibi, sütun dengelemesi yalnızca çift sütun boyutları için çalışır. Ancak, satırları iç içe yerleştirerek eşit olmayan sütunları da ortalayabilirsiniz.

12'lik bir ızgarada 1 sütununu ortalamak istediğiniz orijinal soruya sadık kalmak için.

2 sütununu dengeleyerek 5 ortalayın
Yuvalanmış bir satır oluşturun, böylece 2 sütununuzun içine yeni bir 12 sütun elde edersiniz.
1 sütununu ortalamak istediğiniz ve 1'in 2 yarısı "(adım 1'de ortalandığımız) olduğundan, şimdi iç içe satırınızda 6 sütununu merkeze yerleştirmeniz gerekir.

Örneğin:

<div class="container">
  <div class="row">
    <div class="col-md-offset-5 col-md-2">
      <div class="row">
        <div class="col-md-offset-3 col-md-6">
          centered column with that has an "original width" of 1 col
        </div>
      </div>
    </div>
  </div>
</div>

Bu kemanı gör sonucu göz de sırayla çıkış penceresinin boyutunu artırmak zorunda olduğunu, lütfen not, aksi sütunlar saracak.

— Reinder
kaynak

5

Bu benim kodum değil, ama mükemmel çalışıyor (Bootstrap 3 üzerinde test edilmiştir) ve col-offset ile uğraşmak zorunda değilim.

Demo:

/* centered columns styles */

.col-centered {
  display: inline-block;
  float: none;
  /* inline-block space fix */
  margin-right: -4px;
  background-color: #ccc;
  border: 1px solid #ddd;
}

<div class="container">
  <div class="row text-center">
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
  </div>
</div>

Snippet'i genişlet

— Binar Web
kaynak

4

Bunu masa düzeni mekanizmasını kullanarak başarabiliriz:

Mekanizma:

Tüm sütunları tek bir div'e sarın.
Bu div'i sabit bir yerleşime sahip bir tablo olarak yapın.
Her sütunu tablo hücresi olarak oluşturun.
İçerik konumunu kontrol etmek için dikey hizalama özelliğini kullanın.

Örnek demo burada

— Mohan Dere
kaynak

4

Aşağıdaki kod parçasını .row veya .col'nize ekleyin. Bu Bootstrap 4 * içindir.

d-flex justify-content-center

— Thomas Chirwa
kaynak

3

Koala_dev'in yaklaşım 1'de kullandığı gibi, merkezi blok veya sınırlı kullanımı olan kenar boşlukları yerine ofset yöntemini tercih ederim, ancak belirttiği gibi:

Şimdi, bu yöntem için bariz bir dezavantaj var, sadece sütun boyutları için bile çalışıyor, bu yüzden sadece .col-X-2, .col-X-4, col-X-6, col-X-8 ve col-X- 10 desteklenmektedir.

Bu, tek sütunlar için aşağıdaki yaklaşım kullanılarak çözülebilir.

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>

— Abhinav Singh
kaynak

3

Bootstrap'iniz için çok esnek çözüm flexbox'ını kullanabilirsiniz.

justify-content: center;

sütununuzu ortalayabilir.

Esnek kontrol edin .

— Sert
kaynak

2

Ben sadece tek bir merkeze ihtiyacı var asla Çünkü .col-bir mesafede .row, ben sarma aşağıdaki sınıfını set .rowbenim hedef sütun.

.col-center > [class*="col-"] {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

Misal

<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>

— Walter Roman
kaynak

2

Izgarayı dolduracak tam sayıya sahip olmadığınızda sütun öğelerini ekranda ortalamak isteyenler için, sınıf adlarını döndürmek için küçük bir JavaScript parçası yazdım:

function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
    var arrayFill = function (size, content) {
        return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
    };

    var elementSize = parseInt(12 / elementsPerRow, 10);
    var normalClassName = 'col-' + screenSize + '-' + elementSize;
    var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
    var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
    var ret = arrayFill(numberOfFittingElements, normalClassName);
    var remainingSize = 12 - numberOfRemainingElements * elementSize;
    var remainingLeftSize = parseInt(remainingSize / 2, 10);
    return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}

5 öğeniz varsa ve bir satırda satır başına 3 olmasını istiyorsanız md, bunu yaparsınız:

colCalculator(5, 3, 'md')
>> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]

Unutmayın, ikinci argüman 12 ile bölünebilir olmalıdır.

— jsgoupil
kaynak

2

Bir Bootstrap satırında birden fazla sütunu ortalamak için - ve sütunların sayısı tuhafsa, bu csssınıfı o satırdaki tüm sütunlara eklemeniz yeterlidir :

.many-cols-centered {  // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg
  display:inline-block;
  float:none;
}

HTML'nizde şöyle bir şey var:

<div class="row text-center"> <!-- text-center centers all text in that row -->
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image1.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image2.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image3.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
</div>

— Ruto Collins
kaynak

2

Bunu dene

<div class="row">
    <div class="col-xs-2 col-xs-offset-5"></div>
</div>

Diğerleri colvb.Kullanabilirsiniz col-md-2.

— Ch UmarJamil
kaynak

2

Sadece sınıfı kullanmanızı öneririm text-center:

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

— Dadhich Sourav
kaynak

2

Bu kodu deneyin.

<body class="container">
    <div class="col-lg-1 col-lg-offset-10">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Burada col-lg-1 kullandım ve div'ı büyük cihazlarda düzgün bir şekilde ortalamak için ofset 10 olmalıdır. Orta ila büyük aygıtlar üzerinde ortalamanız gerekiyorsa, lg'yi md olarak değiştirin.

— Bangash
kaynak

2

Bootstrap 4 çözümü:

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>

— JanBrus
kaynak

1

Bunu satırınıza koyarsanız, içindeki tüm sütunlar ortalanır:

.row-centered {
    display: flex;
    justify-content: space-between;
}

— Eran Shabi
kaynak

öğeyi yanıt vermiyor.

— gfivehost

1

Daha kesin olmak gerekirse, Bootstrap'ın ızgara sistemi 12 sütun içerir ve herhangi bir içeriği ortalamak için, örneğin, içeriğin bir sütunu kapladığını varsayalım. Birinin Bootstrap ızgarasının iki sütununu işgal etmesi ve içeriği işgal edilen iki sütunun yarısına yerleştirmesi gerekir.

<div class="row">
   <div class="col-xs-2 col-xs-offset-5 centered">
      ... your content / data will come here ...
   </div>
</div>

'col-xs-offset-5', ızgara sistemine içeriği nereye yerleştirmeye başlayacağını söyler.

'col-xs-2', ızgara sistemine içeriğin soldan kaç sütun içermesi gerektiğini söylüyor.

'ortalanmış' içeriği ortalayacak tanımlanmış bir sınıf olacaktır.

Bu örnek Bootstrap'ın ızgara sisteminde şöyle görünür.

Sütunlar:

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

....... ofset ........ veri. .......kullanılmamış........

— Tech
kaynak

Twitter Bootstrap 3'ü kullanarak bir sütunu ortalayın

Yaklaşım 1 (ofsetler):

Yaklaşım 2 (eski margin:auto)

2018 Güncellemesi

HTML:

CSS:

Bunu masa düzeni mekanizmasını kullanarak başarabiliriz:

Örnek demo burada

Yaklaşım 2 (eski `margin:auto`)