Bootstrap 4'te içeriği bir sütunun içinde ortalayın

95

Sorunu çözmek için yardıma ihtiyacım var, içeriği bootstrap4'teki sütunun içinde ortalamam gerekiyor, lütfen aşağıda kodumu bulun

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3">
        <div class="nauk-info-connections">
        </div>
     </div>
</div>

twitter-bootstrap flexbox bootstrap-4

— Praveen Kumar
kaynak

2

Kullanabilirsiniz class="text-center".

— Mihai Alexandru-Ionut

Kullanmayı denedim ama Bootstrap4 için çalışmıyor, tek başına metin ortalanıyor ama "nauk-info-connection" sınıfına sahip div'in col-3 div içinde ortalanmasına ihtiyacım var.

— Praveen Kumar

Kapsayıcı .nauk-info-bağlantılarını ortalamak için geleneksel yöntemi kullandım {border-radius: 50%; border: 1px katı $ nauk-turuncu; yükseklik: 100px; genişlik: 100px; kenar boşluğu: 0 otomatik; }

— Praveen Kumar

206

Bootstrap 4'te birden fazla yatay merkezleme yöntemi vardır ...

text-centermerkez display:inlineelemanlar için
offset-*veya sütunu ( ) ortalamak mx-autoiçin kullanılabilircol-*
ya da, justify-content-centerilgili rowiçin merkezi sütun ( col-*)
mx-autodisplay:blockiçindeki elemanları ortalamak içind-flex

mx-auto(otomatik x ekseni kenar boşlukları), tanımlanmış bir genişliğe (%, vw, px, vb.) sahip öğeleri display:blockveya ortalayacaktır display:flex. Flexbox varsayılan olarak ızgara sütunlarında kullanılır, bu nedenle çeşitli flexbox merkezleme yöntemleri de vardır.

Bootstrap 4 Merkezleme Yöntemlerinin Demosu

Senin durumunda, kullanımı mx-automerkezi col-3ve text-center's içeriğini ortalamak için ..

<div class="row">
    <div class="col-3 mx-auto">
        <div class="text-center">
            center
        </div>
    </div>
</div>

https://codeply.com/go/GRUfnxl3Ol

veyajustify-content-center flexbox öğelerinde (.row)kullanarak:

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            center
        </div>
    </div>
</div>

Ayrıca bkz:
Bootstrap 4'te Dikey Hizalama Merkezi

— Zim
kaynak

Teşekkürler. Örneklerde veya Bootstrap belgelerinde görmediğim şey, satır içi olmayan öğelerin farklı kesme noktalarında yatay merkezlenmesidir. Örneğin, a'yı <select>md'de ve üstünde ortalamak, ancak md'nin altında sola hizalamak.

— KayakinKoder

Bootstrap 4 kullanıyorsanız select, display: block, display: inline, çünkü form-controldisplay: block. Elbette asıl soru duyarlı kesme noktaları kullanmakla ilgili değildi, bu yüzden yanıtta açıklanmadı.

— Zim

12

<div class="container">
    <div class="row">
        <div class="col d-flex justify-content-center">
             CenterContent
        </div>
    </div>
</div>

Snippet'i genişlet

İstediğimiz gibi sütun için "esnek" i etkinleştirin ve yasla-içerik merkezini kullanın

— Dhinesh Evet
kaynak

bu benim için işe yarayan tek çözüm. vay be! teşekkür ederim;)

— Akhil

8

Sütununuza sınıf ekleyin text-center:

<div class="col text-center">
I am centered
</div>

— zhekaus
kaynak

5

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            Center text goes here
        </div>
    </div>
</div>

Ben kullandım justify-content-centersınıfı yerine mx-autoolduğu gibi bu cevap .

https://jsfiddle.net/sarfarazk/4fsp4ywh/ adresinde kontrol edin

— Sarfaraz Kasmani
kaynak

2

Bu, en çok oylanan cevapta

— Jean-François Corbett

@ Jean-François Corbett mx-auto yerine justify-content-center sınıfını kullandım. Bu aynı zamanda bunu yapmanın bir yöntemidir. İnsanlar bunu kullanabilir, ben de sadece başkalarına yardım etmeye çalışıyorum. Teşekkürler

— Sarfaraz Kasmani

Ah doğru. Pekala, biraz açıklama uzun bir yol kat edebilir.

— Jean-François Corbett

1

.row>.col, .row>[class^=col-] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col col-lg-2">
      1 of 2
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Snippet'i genişlet

— Abdo-Host
kaynak

1

2020: Benzer Sorun

Senin Eğer içerik bir olan düğmeler kümesi bir sayfada merkeze istediğiniz, daha sonra bunları sarmak satırda ve kullanımı haklı-içerik-merkezini.

Aşağıdaki örnek kod:

<div class="row justify-content-center">

    <button>Action A</button>
    <button>Action B</button>
    <button>Action C</button> 

</div>

— MarcoZen
kaynak