Judul tengah bootstrap

93

Ini adalah pengalaman Bootstrap Twitter pertama saya. Saya telah menambahkan beberapa judul (h1, h2, dll.) Dan disejajarkan di sisi kiri. Bagaimana cara yang benar untuk memusatkan heading?

twitter-bootstrap SiberianGuy
sumber
Bagaimana Anda memuat judul? Di dalam wadah, seperti ptag, atau longgar?
Andres Ilich
@AndresIlich, di dalam baris-fluida (yang ada di dalam wadah-fluida)
SiberianGuy
apakah Anda ingin memusatkan semua heading? atau hanya beberapa orang terpilih?
Andres Ilich
@AndresIlich, saya ingin semua judul dipusatkan secara default
SiberianGuy

Jawaban:

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

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

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

bootstrap telah menambahkan tiga kelas css untuk perataan teks.

Jinpu Hu
sumber
69

cukup gunakan class = 'text-center' di elemen untuk judul tengah.

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

gunakan class = 'text-left' di elemen untuk heading kiri, dan gunakan class = 'text-right' di elemen untuk heading kanan.

Sadegh-khan
sumber
30

Cukup gunakan "justify-content-center" di atribut kelas baris.

<div class="container">
  <div class="row justify-content-center">
    <h1>This is a header</h1>
  </div>
</div>
Jufrench
sumber
2
Mengapa semua ini rumit? Bukankah <h1 class="text-center">lebih sederhana, sesuai dengan jawaban Sadegh-khan ?
Marco Sulla
Menggunakan ini memungkinkan header menjadi terpusat di div saat menggunakan bootstrap yang tidak dilakukan menggunakan text-center. Itu membuat tajuk muncul di tengah layar yang saya tuju.
a.norman
11

Berdasarkan komentar Anda, untuk memusatkan semua tajuk, yang harus Anda lakukan adalah menambahkan text-align:centersemuanya pada saat yang sama, seperti:

CSS

    h1, h2, h3, h4, h5, h6 {
        text-align: center;
    }
Andres Ilich
sumber
1
Meskipun benar, ide di balik penggunaan bootstrap twitter adalah menggunakan kelas yang ada sejauh mungkin. Lihat jawabannya oleh Jinpu Hu
Skurpi
@Skurpi Frameworks berfungsi sebagai saran terhadap apa yang dapat Anda gunakan dalam sebuah proyek; Mereka sama sekali tidak diberikan. Meskipun lebih mudah menggunakan kelas dan gaya yang sudah diberikan dalam bootstrap, jika persyaratan proyek Anda "mengharuskan" Anda untuk membuat beberapa perubahan drastis pada kerangka kerja, sesuai pertanyaan OP, daripada cara termudah untuk melakukannya adalah dengan hanya memodifikasi perubahan tersebut di tingkat akar. Berbeda dengan menambahkan banyak kelas yang sebenarnya tidak Anda butuhkan.
Andres Ilich
@Skurpi Selanjutnya, kelas - kelas penyelarasan tersebut tidak ada pada saat penulisan. Jawaban ini berumur satu tahun.
Andres Ilich
Ilich Anda benar, tidak melihat tanggal pertanyaan ini ketika saya tiba di sini
Skurpi
5

Bootstrap hadir dengan banyak kelas pra-bangun dan salah satunya adalah class="text-left". Harap hubungi kelas ini kapan pun diperlukan. :-)

Tinsae
sumber