Cara Mengatur Tombol Submit ke Tengah di HTML
Tombol submit pada formulir HTML secara default akan berada di sebelah kiri. Untuk mengaturnya agar berada di tengah, kamu bisa menggunakan beberapa cara. Berikut adalah beberapa contohnya:
1. Menggunakan CSS text-align
Cara pertama adalah dengan menggunakan CSS text-align
pada elemen container tombol submit. Berikut contohnya:
Align Submit Button Center
Pada kode di atas, kita menggunakan kelas container
untuk membungkus tombol submit. Kemudian, kita menggunakan text-align: center
pada CSS untuk mengatur tombol agar berada di tengah.
2. Menggunakan CSS margin: 0 auto
Cara kedua adalah dengan menggunakan CSS margin: 0 auto
. Dengan cara ini, kita bisa mengatur margin secara otomatis agar tombol berada di tengah. Berikut contohnya:
Align Submit Button Center
Pada kode di atas, kita menggunakan display: block
untuk menjadikan tombol sebagai elemen blok. Kemudian, kita menggunakan margin: 0 auto
untuk mengatur margin kiri dan kanan agar sama dan otomatis berada di tengah.
3. Menggunakan Flexbox
Cara ketiga adalah dengan menggunakan Flexbox. Dengan Flexbox, kita bisa mengatur elemen agar berada di tengah secara lebih mudah. Berikut contohnya:
Align Submit Button Center
Pada kode di atas, kita menggunakan display: flex
untuk menjadikan container sebagai elemen Flexbox. Kemudian, kita menggunakan justify-content: center
untuk mengatur agar elemen di dalam container berada di tengah secara horizontal.
4. Menggunakan CSS Grid
Cara keempat adalah dengan menggunakan CSS Grid. Dengan CSS Grid, kita bisa mengatur elemen agar berada di tengah secara lebih fleksibel. Berikut contohnya:
Align Submit Button Center
Pada kode di atas, kita menggunakan display: grid
untuk menjadikan container sebagai elemen Grid. Kemudian, kita menggunakan place-items: center
untuk mengatur agar elemen di dalam container berada di tengah secara horizontal dan vertikal.
Itulah beberapa cara untuk mengatur tombol submit agar berada di tengah di HTML. Pilih cara yang paling sesuai dengan kebutuhan Anda.