Fungsi Offsets dan Alignment Pada Framework CSS Materialize

Halo selamat datang kembali di blog tips dan trik Source Code Aplikasi, berjumpa kembali dengan saya melanjutkan pembahasan mengenai framework css materialize. Di kesempatan kali ini kita akan belajar mengenai Fungsi Offsets dan Alignment Pada Framework CSS Materialize dimana cara kali ini berhubungan dengan artikel sebelumnya yaitu Mengetahui Grid Sistem Pada Framework CSS Materialize

Pertama-tama kita bahas terlebih dahulu apa itu Offsets..??

Pada framework materialize ini ada istilah yang namanya Offsets seperti hal nya di framework css bootstrap pun ada kegunaan Offsets dan pun sama kegunaannya yaitu bagi melompati kolom atau lebih tepatnya menyembunyikan kolom sebelumnya. Dengan seperti itu kolom yang diberikan Offsets tak akan di tampilkan alias tak ada konten nya. Kemudian kegunaan Alignment yang disediakan oleh materialize ini berfungsi bagi mengatur posisi text, seandainya lazimnya nya kita menggunakan css native lazimnya kita menggunakan text-align dan line-height. Di pada Alignment kita pun dapat memposisikan text presisi tengah atau lazimnya kita menggunakan line-height. Jadi dengan adanya cara ini kita tanpa perlu lagi pengaturan di kembangkan css nya karena tinggal memanggil class nya dan seketika tertata sendiri.

Bagus kita praktekkan Kegunaan Offsets dan Alignment Di Framework CSS Materialize teman – teman siapkan file materialize nya kemudian ketikkan script di index.html nya, seandainya masih bingung bagi menginstal teman – teman dapat review di artikel sebelumnya.

Jikalau telah save dan jalankan di browsernya, hasilnya seperti gambar di bawah ini

Kemudian teman – teman tambahkan  offset-s6 offset-l6 offset-m6 offset-xl6 di class col pertama-tama, karenanya seandainya disave col 6 akan di kosongkan di seluruh device

Berikutnya kita praktekkan Alignment, teman – teman tambahkan script di index,html nya

<div class=col l12 teal lighten-2 align>
    <h5>Implementasi Alignment valign-wrapper</h5>
</div>

Kemudian berikan sedikit css nya bagi mengatur tingginya nya

Save dan refres di browsernya

Kemudian kita tambahkan di pada class col nya valign-wrapper

Karenanya konten akan center diantara tinggnya

Selain itu kita pun dapat menambahkan lagi class left-align, center-align dan right-align bagi mengatur posisi text nya, saya coba berikan class right-align di tag h5 nya

Karenanya hasilnya seperti gambar di bawah ini

Seperti itulah beberapa cara yang di sediakan oleh framework css materialize, dan masih banyak lagi cara yang lainnya. Akan saya bahas di artikel berikutnya, seandainya teman – teman masih bingung silahkan post komentar di form di bawah ini supaya kita dapat sama – sama share seputar dunia blog. Oke demikian di artikel kali ini mengenai Fungsi Offsets dan Alignment Pada Framework CSS Materialize semoga bermanfaat, terimkasih dan hingga jumpa.

 

 

Sumber https://kursuswebsite.org