Align Submit Button Center Html

5 min read Jun 28, 2024
Align Submit Button Center Html

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.

Related Post


Featured Posts