Bagaimana untuk Memusatkan Bekas Secara Menegak Menggunakan Bootstrap dan Kaedah Lain?

Bagaimana untuk Memusatkan Kontena secara Menegak dalam Bootstrap?

Penjajaran Menegak dengan Kotak Fleksibel

Reka letak kotak fleksibel menawarkan penyelesaian yang mudah untuk penjajaran menegak. Ia disokong secara meluas oleh pelayar web moden, kecuali Internet Explorer 8 dan 9.

Buat kelas yang dipanggil .vertical-center dan tambahkannya pada div .jumbotron.

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

Tradisional Kaedah untuk Penyemak Imbas Web Lama

Untuk pelayar lama seperti Internet Explorer 8 dan 9, kami boleh menggunakan unsur pseudo dan penjajaran menegak.

.vertical-center {
  height:100%;
  width: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;
}

Pertimbangan

• Elemen sebaris dijajarkan secara menegak ke garis dasar induk ditambah separuh ketinggian x induk.
• Untuk memusatkan elemen sebaris secara menegak, ketinggiannya mesti ditetapkan agar sepadan dengan induk ketinggian.
• Elemen pseudo boleh digunakan untuk mencipta elemen blok sebaris tinggi penuh untuk mencapai penjajaran menegak.
• Tetapkan semula sifat fon untuk mengelakkan jurang antara elemen sebaris.
• Pertimbangkan kedudukan dan indeks z untuk elemen di sekeliling bekas untuk susunan yang betul.

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