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.

Cara membuat icon sejajar pada posisi list atau agar Icon sejajar

Nah caranya sangat mudah sekali, buat kamu yang gk paham sedikit pun maka akan mudah melakukan nya.

Langkah pertama

pada elemen html tambahan atribut class sejajar, maka setelah kamu menambah atribut class sejajar akan tampil seperti ini

Langkah kedua

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>

Selesai

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 😂