Bagaimana untuk Memusatkan Bekas secara Menegak dalam Bootstrap Menggunakan Flexbox dan Kaedah Tradisional?

Bagaimana untuk Memusatkan Bekas secara Menegak dalam Bootstrap?

Apabila bekerja dengan Bootstrap, adalah perkara biasa untuk menghadapi keperluan penjajaran menegak, terutamanya dalam komponen jumbotron. Artikel ini membincangkan dua pendekatan untuk mencapai matlamat ini menggunakan kotak fleksibel dan kaedah tradisional.

Pendekatan Kotak Fleksibel

Dengan kemunculan susun atur kotak fleksibel, penjajaran menegak telah dipermudahkan dengan ketara. Kaedah ini memanfaatkan paparan: sifat fleksibel dan sifat item jajar ditetapkan ke tengah.

.vertical-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

Pendekatan Tradisional untuk Penyemak Imbas Warisan

Untuk keserasian Internet Explorer 8 dan 9, pendekatan tradisional menggunakan elemen pseudo dan elemen blok sebaris adalah disyorkan. Kaedah ini melibatkan mencipta elemen pseudo dengan ketinggian penuh, menetapkan penjajaran menegaknya ke tengah dan menetapkan paparan kedua-dua elemen pseudo dan elemen bekas kepada blok sebaris.

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

.vertical-center:before {
  content: " ";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Tambahan Pertimbangan

• Untuk mengelakkan isu penjajaran menegak dalam skrin lebih kecil, ketinggian elemen pseudo boleh ditetapkan kepada auto atau 0 menggunakan pertanyaan media CSS.
• Untuk memastikan bahagian pengaki/pengepala kekal kelihatan dan di atas elemen lain, pertimbangkan untuk menggunakan kedudukan yang betul dan nilai indeks z yang lebih tinggi.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Bekas secara Menegak dalam Bootstrap Menggunakan Flexbox dan Kaedah Tradisional?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!