Twitter Bootstrap - öğeleri yatay veya dikey olarak ortalama

285

HTML öğelerini ana ebeveynlerin içinde dikey veya yatay olarak ortalamanın bir yolu var mı?

css twitter-bootstrap

— benim
kaynak

2

Bu, yatay ve dikey olarak merkezleme hakkında harika bir gönderi: See Here

— markvandencorput

2

Ben de yatay hizalama için bir sorunla karşı karşıyaydım; <center></center>Etiketi kullandım

— Utpal - Ur Best Pal

4

@ Utpal-UrBestPal <center>etiketi yaklaşık 12 yıl önce kullanımdan kaldırıldı.

— Niels Keurentjes

246

Güncelleme : Bu cevap muhtemelen 2013'ün başlarında doğru olsa da, artık kullanılmamalıdır. Uygun çözüm ofsetleri kullanır .

Diğer kullanıcıların önerilerine gelince, yerel bootstrap sınıfları da vardır:

class="text-center"
class="pagination-centered"

@Henning ve @trejder sayesinde

— benim
kaynak

22

Aynı stil Bootstrap'ta zaten mevcut; sadece kullanınclass="text-center"

— Henning

3

Veya .pagination-centeredalternatif olarak.

— trejder

7

Cevap bu olmalı, diğerleri sorudaki 'bootstrap' kısmını görmezden geliyorlar.

— Ryan McDonough

1

@RyanMcDonough evet etkili bir şekilde bu diğer insanların önerdiği riassuming yani cevap tamam olarak kontrol?

— itsme

1

text-centerDüzen için kullanmak çok kötü bir uygulamadır. Bootstrap'ta sütunları hizalamanın uygun yolu col-XX-offset-Ysınıfları kullanmaktır . getbootstrap.com/css/#grid-offsetting . Bu cevap muhtemelen 2013'te doğruydu, ancak bugün kullanılmamalıdır.

— Niels Keurentjes

76

Gönderen Bootstrap belgelerinde :

Bir öğeyi olarak display: blockve ortalayarak ayarlayın margin. Mixin ve sınıf olarak mevcuttur.

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

— m0000g
kaynak

55

Bu sorunun gelecekteki ziyaretçileri için:

Bir görüntüyü div içinde ortalamaya çalışıyorsanız ancak görüntü ortalanmıyorsa, bu sorununuzu tanımlayabilir:

jsFiddle DEMO sorunu

<div class="col-sm-4 text-center">
    <img class="img-responsive text-center" src="myPic.jpg" />
</div>

img-responsiveSınıf ekler display:blockdurur resim etiketi, talimat text-align:center( text-centerçalışmasını sınıf).

ÇÖZÜM:

<div class="col-sm-4">
    <img class="img-responsive center-block" src="myPic.jpg" />
</div>

jsFiddle of the solution

center-blockSınıf eklemek, sınıfı display:blockkullanarak verilen komutu geçersiz kılar img-responsive.

img-responsiveSınıf olmasaydı, görüntü yalnızca text-centersınıf ekleyerek ortalanırdı

Güncelleme:

Ayrıca, flexbox'ın temellerini ve nasıl kullanılacağını bilmelisiniz , çünkü Bootstrap4 artık yerel olarak kullanıyor .

İşte Brad Schiff'in mükemmel, hızlı tempolu bir video eğitimi

İşte harika bir hile sayfası

— cssyphus
kaynak

32

Güncelleme 2018

In Bootstrap 4 , ortalama yöntemleri değişti ..

BS4'te Yatay Merkez

text-centerhala display:inlineelemanlar için kullanılıyor
mx-autoçocukların center-blockmerkezini değiştirirdisplay:flex
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

30

Doğrudan css dosyanıza şöyle yazabilirsiniz:

.content {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  }

<div class = "content" >
  
   <p> some text </p>
  </div>

Snippet'i genişlet

— kirgiz_jigit
kaynak

9

Bunu kullanıyorum

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0 0;
    }

    .container-fluid {
        height: 100%;
        display: table;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .row-fluid {
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }

    .centering {
        float: none;
        margin: 0 auto;
    }
</style>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="offset3 span6 centering">
                content here
            </div>
        </div>
    </div>
</body>

— atabak
kaynak

1

Belirli durumlarda çalışmaz ( esas olarak aynı cevap hakkındaki yoruma bakın ve merkezleme için Bootstrap'a özgü sınıfları kullanmaz .

— Dan Dascalescu

7

yatay merkezleme için böyle bir şeye sahip olabilirsiniz:

.centering{
float:none;
margin:0 auto
}

 <div class="span8 centering"></div>

— PersianMan
kaynak

4

Does doğrudan bir resimde kullanılan (en azından değil şimdiki uygulamada) değil iş,: <img src="img/logo.png" style="float:none; margin:0 auto" />. Etraftaki imgebeveyn ile divve verilmesi .text-centerveya .pagination-centeredebeveyne sınıf bir cazibe gibi çalışır.

— trejder

2

bir öğeyi kenar boşluğu: 0 otomatik ile ortalamak için o öğeye bir genişlik eklemeniz gerekir. Yukarıdaki örnekte, span8 öğesinin boobstrap öğesinde bir genişliği olduğu için hiçbir genişlik belirtilmemiş, ancak görüntünüz böyle değil <img src = "img / logo.png" style = "float: none; kenar boşluğu: 0 otomatik; genişlik: 300 piksel" /> ebeveynin içindeki görüntüyü yatay

— Raul

2

Bu, sorunun "Bootstrap" bölümünü yok sayar.

— Dan Dascalescu

5

Bu çözümü benzer bir sorudan beğendim. https://stackoverflow.com/a/25036303/2364401text-center Gerçek tablo verileri <td>ve tablo başlığı <th>öğelerinde bootstraps sınıfını kullanın . Yani

<td class="text-center">Cell data</td>

ve

<th class="text-center">Header cell data</th>

— xander-miller
kaynak

5

Bootstrap 4 ile flex'i kullanabilirsiniz

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

Kaynak: bootstrap 4.1

— alvseek
kaynak

3

bootstrap 4 + Flex bunu çözer

kullanabilirsiniz

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

Snippet'i genişlet

merkezini yatay ve dikey olarak ortalamalı

— taoufiqaitali
kaynak

0

Bootstrap 4'te bunu yapabilirsiniz:

merkez yatay gerçekten text-centersınıftır

ancak dikey olarak bootstrap sınıflarını kullanmak mb-auto mt-auto, kenar boşluğu ve kenar boşluğu otomatik olarak ayarlanacak şekilde her ikisini de ekler .

— çevrimiçi Thomas
kaynak

0

için bootstrap4birkaç öğenin dikey merkezi

D-esnekesnek kurallar için

esnek sütunluöğelerde dikey yön için

haklı-içerik-merkezmerkezleme için

stil = 'yükseklik: 300 piksel;' Merkezin kireçli olduğu veya h-100 sınıfının kullanıldığı ayar noktaları için olmalıdır

<div class="d-flex flex-column justify-content-center bg-secondary" style="
    height: 300px;
">
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
  </div>

— Ramil Gilfanov
kaynak