Bagaimanakah Saya Boleh Memusatkan Butang Secara Mendatar dan Menegak dalam Div Lebar Penuh?

Panduan Komprehensif untuk Memusatkan Butang dalam Elemen Div

Dalam bidang reka bentuk web, tugas meletakkan elemen dengan tepat amat penting. Memusatkan butang dalam div, misalnya, boleh meningkatkan daya tarikan visual dan pengalaman pengguna tapak web anda dengan ketara.

Soalan:

Untuk mencapai penjajaran yang diingini, web pembangun sering menghadapi soalan berikut:

Bagaimana saya boleh memusatkan butang dalam div yang menjangkau lebar penuh (_100%_) bekas induknya?

Jawapan:

Pendekatan Moden: Memanfaatkan Flexbox

Pelayar moden mempunyai kuasa Flexbox, modul CSS yang direka untuk susun atur yang fleksibel. Flexbox membolehkan penjajaran tepat elemen di sepanjang kedua-dua paksi mendatar dan menegak, menjadikannya penyelesaian ideal untuk butang tengah.

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

Pendekatan Warisan: Menggunakan Kedudukan dan Margin

Dalam penyemak imbas yang mungkin tidak menyokong sepenuhnya Flexbox atau apabila dimensi tetap diperlukan, kaedah alternatif melibatkan penggunaan kedudukan dan jidar.

button {
  height: 20px;
  width: 100px;
  margin: -20px -50px;
  position: relative;
  top: 50%;
  left: 50%;
}

Pilihan Tambahan

Untuk pemusatan mendatar sahaja, pertimbangkan sifat CSS berikut:

• margin: 0 auto;
• selaraskan teks: tengah; digunakan pada div induk

Kesimpulan:

Butang pemusatan dalam div telah menjadi tugas yang mudah berkat kemunculan Flexbox dan teknik penjajaran warisan. Pilih pendekatan yang paling sesuai dengan sokongan penyemak imbas khusus anda dan keperluan susun atur, memastikan butang anda bukan sahaja berfungsi tetapi juga menarik dari segi estetika.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan Butang Secara Mendatar dan Menegak dalam Div Lebar Penuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!