Cara membuat icon sejajar pada posisi list atau agar Icon sejajar – kirmanalidris.com
Emm etah bagaimana mana menyebutkan hal di atas, apa cara membuat Icon sejajar pada posisi list atau agar icon sejajar?🤔.. Lupakan ana lah yang terpenting adalah tujuan nya,,
pernahkah kamu merasa saat membuat list dengan tulisan yang disampingnya dengan icon, svg, font-aweseome?.. untuk lebih jelasnya lihatlah gambar dibawah.
setelah kamu melihat gambar di atas apa yang terjadi?.. ikon svg dan tulisannya tampaknya aneh dah tidak sejajar kan?…
nah maksudnya dari postingan ini adalah bagaimana cara merapikan nya dan agar si element icon dan tulisannya tampil dengan sejajar dalam baris.
Bagaimana caranya?🤔
nah cara membuat icon sejajar pada posisi list atau agar Icon sejajar tampaknya sangat mudah tapi…. akan sulit jika tidak paham sedikit pun dengan CSS.
Nah caranya sangat mudah sekali, buat kamu yang gk paham sedikit pun maka akan mudah melakukan nya.
pada elemen html tambahan atribut class sejajar, maka setelah kamu menambah atribut class sejajar akan tampil seperti ini
Setelah menambah atribut class “sejajar” pada elemen yang akan menjadi sejajar, selanjutnya kamu perlu menambahkan style atau CSS kedalam dokumen Html kamu.
berikut dibawah ini style nya dan css nya.
<style> .sejajar{ display: flex; align-items: center; } /* Ganti svg sesuai icon yang digunakan*/ .sejajar svg{ margin-right: 10px; } </style>
Conba kamu lihat hasilnya, maka akan menjadi seperti gambar dibawah ini, tampil dengan sejajar dan rapi.
nah selanjutnya kamu amati dan pelajari supaya lebih mendalam dengan CSS.
wajib.. cobalah untuk berkomentar dengan relevan yang terkait dengan postingan ini, saya akan menjawab dengan senang hati 😂
Tinggalkan Balasan