Bagaimana untuk Memusatkan Bekas Secara Menegak dalam Bootstrap Jumbotron?

Penjajaran Menegak Bekas dalam Jumbotron dalam Bootstrap

Mencapai penjajaran menegak bekas dalam jumbotron dalam Bootstrap boleh dicapai melalui pelbagai pendekatan, bergantung pada tahap sokongan pelayar dikehendaki.

Cara Moden

Menggunakan Flexbox

Untuk penyemak imbas moden yang menyokong Flexbox, pendekatan yang lebih mudah dan konsisten ialah menggunakan model susun atur Flexbox. Dengan menambahkan CSS berikut pada halaman anda:

.vertical-center {
  display: flex;
  align-items: center;
}

anda boleh dengan mudah menegakkan bekas dalam jumbotron. Pastikan anda mengelilingi bekas dengan div dengan kelas ".vertical-center".

Cara Lama

Untuk Penyemak Imbas Lama

Untuk penyemak imbas yang tidak mempunyai sokongan Flexbox , teknik standard web yang melibatkan penjajaran menegak memerlukan sedikit usaha. Gunakan sifat penjajaran teks: tengah untuk menjajarkan elemen anak secara mendatar dalam induk. Buat elemen div yang pada mulanya disembunyikan dengan paparan: tiada dengan ketinggian sama atau kurang daripada induk. Sekarang, manipulasi penjajaran menggunakan penjajaran menegak pada elemen yang diingini (seperti bekas).

.vertical-center {
  text-align: center;
  font: 0/0 a;
}

.vertical-center .hidden-child {
  display: none;
  height: 100%;
}

.vertical-center.aligned .hidden-child {
  display: inline-block;
  vertical-align: middle;
}

Dalam bekas, tambah paparan: inline-block; property along with vertical-align: middle; untuk mencapai pemusatan menegak. Ambil perhatian bahawa ini melibatkan beberapa penanda tambahan untuk meniru kesan Flexbox.

Pertimbangan Penyemak Imbas

Ingat bahawa Internet Explorer 8 dan 9 tidak akan mentafsir teknik blok sebaris dengan betul, yang memerlukan penyelesaian alternatif.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Bekas Secara Menegak dalam Bootstrap Jumbotron?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!