Bagaimana untuk Memusatkan Butang Secara Mendatar (dan Menegak) Dalam Div Lebar Penuh?

Memusatkan Butang dalam Div dengan Lebar 100%

Keperluan biasa dalam CSS ialah memusatkan butang dalam div yang merentangi keseluruhan lebar halaman. Untuk mencapai matlamat ini, terdapat beberapa kaedah yang tersedia.

Satu pendekatan ialah menggunakan Flexbox. Dengan menetapkan sifat paparan div kepada flex dan menambah justify-content: center and align-item: center, div menjadi bekas flexbox yang memusatkan anak-anaknya secara menegak dan mendatar.

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
button {
  /* Other styles */
}

Jika penjajaran menegak tidak perlu, anda hanya boleh menggunakan justify-content: center.

#wrapper {
  display: flex;
  justify-content: center;
}
button {
  /* Other styles */
}

Untuk pendekatan yang lebih tradisional, anda boleh menetapkan sifat margin daripada butang ke auto. Ini akan memusatkan butang secara mendatar dalam div.

button {
  margin: 0 auto;
  /* Other styles */
}

Sebagai alternatif, anda boleh menetapkan sifat penjajaran teks div ke tengah. Ini akan memusatkan semua elemen dalam div, termasuk butang.

div {
  text-align: center;
}
button {
  /* Other styles */
}

Ini hanyalah beberapa kaedah untuk memusatkan butang dalam div. Pendekatan terbaik bergantung pada keperluan khusus reka letak anda.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Butang Secara Mendatar (dan Menegak) Dalam Div Lebar Penuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!