Bootstrap merkez başlığı

94

Bu benim ilk Twitter Bootstrap deneyimim. Bazı başlıklar (h1, h2 vb.) Ekledim ve bunlar sol tarafa hizalı. Başlıkları ortalamanın doğru yolu nedir?

twitter-bootstrap

— Sibirya
kaynak

Başlıkları nasıl ekliyorsunuz? pEtiket gibi bir kabın içinde mi yoksa gevşek mi?

— Andres Ilich

@AndresIlich, sıvı akışkanın içinde (sıvı kabının içinde)

— SiberianGuy

tüm başlıkları ortalamak mı istiyorsunuz? veya sadece birkaçını seçin?

— Andres Ilich

@AndresIlich, tüm başlıkların varsayılan olarak ortalanmasını istiyorum

— SiberianGuy

142

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

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

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

bootstrap, metin hizalama için üç css sınıfı ekledi.

— Jinpu Hu
kaynak

69

merkez başlık için öğede class = 'text-center' kullanın.

<h2 class="text-center">sample center heading</h2>

sol başlık için öğede class = 'text-left' kullanın ve sağ başlık için öğede class = 'text-right' kullanın.

— Sadık-han
kaynak

30

Satırın sınıf özniteliğinde "justify-content-center" kullanmanız yeterlidir.

<div class="container">
  <div class="row justify-content-center">
    <h1>This is a header</h1>
  </div>
</div>

— Jufrench
kaynak

2

Neden tüm bu karmaşıklık? Sadegh-khan'ın cevabına göre<h1 class="text-center"> sadece daha basit değil mi?

— Marco Sulla

Bunu kullanmak, text-center kullanmanın işe yaramadığı önyükleme kullanılırken başlığın div içinde merkezileştirilmesini sağlar. Başlığın, amacım olan ekranın ortasında görünmesini sağlıyor.

— a.norman

11

Yorumlarınıza göre, tüm başlıkları ortalamak için yapmanız gereken tek şey text-align:centerhepsine aynı anda eklemek , örneğin:

CSS

    h1, h2, h3, h4, h5, h6 {
        text-align: center;
    }

— Andres Ilich
kaynak

1

Doğru olsa da, twitter önyüklemesini kullanmanın arkasındaki fikir, mevcut sınıfları olabildiğince kullanmaktır. Jinpu Hu'nun cevabına bakın

— Skurpi

@Skurpi Frameworks, bir projede kullanabileceklerinize yönelik öneriler olarak işlev görür; Hiçbir şekilde belirli değildirler. Önyüklemede zaten verilen sınıfları ve stilleri kullanmak daha basit olsa da, projenizin gereksinimleri, OP'nin sorusu başına çerçevede bazı köklü değişiklikler yapmanızı "gerektiriyorsa", bunu yapmanın en basit yolu, yalnızca bu değişiklikleri aşağıdaki adreste değiştirmektir. kök seviyesi. Gerçekten ihtiyacınız olmayan bir ton sınıf eklemenin aksine.

— Andres Ilich

@Skurpi Ayrıca, bu hizalama sınıfları yazı yazıldığı sırada mevcut değildi . Bu cevap bir yaşında.

— Andres Ilich

Ilich Haklısın, buraya geldiğimde bu sorunun tarihine

— bakmadım

5

Bootstrap birçok önceden oluşturulmuş sınıfla birlikte gelir ve bunlardan biri class="text-left". Lütfen gerektiğinde bu sınıfı arayın. :-)

— Tinsae
kaynak