image from unsplash
Assalamualaikum, wr. wb. welcome back to my channel gaes. Kali ini saya akan share beberapa trik untuk membuat sebuah elemen atau item menjadi berada di tengah. Ada enam cara untuk melakukan hal tersebut hanya dengan menggunakan CSS saja. Dan berikut adalah beberapa cara yang saya ketahui. 1. Menggunakan Text-AlignCara pertama ini mungkin sering diimplementasikan pada saat ingin menengahkan sebuah teks judul artikel maupun halaman. Namun siapa sangka bahwa kita juga dapat menggunakannya untuk menengahkan sebuah elemen atau sebut saja
2. Menggunakan MarginCara kedua ini sering dipakai untuk menengahkan sebuah konten halaman. Sama seperti cara pertama, cara ini menengahkan secara horizontal. Langsung saja kita lihat caranya sebagai berikut:
3. Menggunakan Absolute PositionDengan menggunakan absolute position kita dapat mengatur posisi elemen dimanapun kita mau tanpa terpengaruh oleh posisi elemen lain. Lalu bagaimana cara menengahkan elemen dengan cara ini.
4. Menggunakan Transform dan TranslateDari tadi kita sudah membuat elemen menengah secara horizontal, namun bagaimana jika kita ingin membuat elemen benar-benar di tengah secara horizontal dan vertikal. Maka inilah caranya:
5. Menggunakan FlexboxCara kelima ini juga akan membuat elemen menjadi berada di tengah baik secara horizontal maupun vertikal. Hampir sama dengan cara pertama, kita butuh dua kelas div untuk mewujudkan ini.
6. Di Tengah Secara VertikalCara terakhir ini akan membuat elemen berada di tengah secara vertikal. Caranya tambahkan style pada kelas Oke sekian sharing pembelajaran kita kali ini, semoga bermanfaat, jangan lupa follow dan share jika berkenan. Buat kalian yang suka UI/UX bisa follow akun instagram saya di @jauhardev Terimakasih, Wassalamualaikum, wr. wb. KLIK DISINI
Apa itu Border pada CSS?Border dalam CSS berfungsi untuk membuat garis tepi sebuah objek HTML. Kita akan membahas border pada materi ini lebih detail lagi. Properti border pada CSS membuat garis tepi pada objek HTML kita.
Apa itu Border Radius?Border Radius merupakan properti untuk membuat suatu element memiliki tepian yang elips atau umumnya disebut sudut lengkungan. Dengan adanya properti border radius, kamu bisa berkreasi dengan menambahkan lengkungan-lengkungan halus di setiap sudut border, hingga memungkinkan kamu untuk membuat sebuah lingkaran.
Property CSS apakah yang digunakan untuk membuat garis pada sepanjang batas sebuah elemen HTML?border adalah property CSS untuk menentukan lebar, corak dan juga warna garis tepi pada elemen HTML yang paling ringkas.
Apa itu Border dalam desain?Border/garis tepi dapat digunakan untuk banyak hal, misalnya sebagai elemen dekoratif atau untuk memberi garis batas pemisah dari dua hal. Border properti mendefinisikan width, color, and style dari batas area pada box/kotak.
|