Bagaimanakah Saya Boleh Memusatkan Dua Elemen Secara Mendatar dan Menegak Di Dalam Div?

Pusat Dua Elemen Secara Mendatar Dalam Ver div

Isu elemen pemusatan menegak dalam div telah ditemui dalam coretan kod yang disediakan. Nampaknya menggunakan tutorial yang dicadangkan tidak menyelesaikan isu.

Penyelesaian Flexbox:

Laksanakan sifat Flexbox untuk menjajarkan elemen secara menegak dan mendatar dalam div:

.banner {
  display: flex;
  justify-content: center;
  align-items: center;
}

Jadual dan Kedudukan Penyelesaian:

Sebagai alternatif, pertimbangkan untuk menggunakan gabungan jadual CSS dan kedudukan kepada elemen kedudukan:

#container {
  display: table;
  vertical-align: middle;
}

.banner {
  display: table-cell;
}

Pertimbangan untuk Pemilihan Kaedah:

Apabila memilih antara dua pendekatan, pertimbangkan perkara berikut faktor:

• Kesederhanaan: Flexbox menawarkan kod yang lebih ringkas untuk elemen pemusatan.
• Sokongan Pelayar: Flexbox disokong oleh penyemak imbas utama, manakala kaedah jadual dan kedudukan mungkin memerlukan awalan vendor untuk keserasian.
• Responsif: Flexbox menyokong reka letak responsif, membenarkan elemen melaraskan kepada saiz skrin yang berbeza.

Pengesyoran Tambahan:

• Gunakan jidar: sifat auto untuk mendatar memusatkan elemen dalam sepanduk.
• Laraskan jidar atas kelas .bannerrightinner untuk memastikan teks dalam perenggan dipusatkan secara menegak.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan Dua Elemen Secara Mendatar dan Menegak Di Dalam Div?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!