Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Memusatkan Butang Secara Mendatar (dan Menegak) Dalam Div Lebar Penuh?

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

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-16 17:53:09836semak imbas

How to Center a Button Horizontally (and Vertically) Within a Full-Width Div?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn