Untuk mengatur posisi tengah, dulu pas pertama kali belajar HTML dan CSS saya hanya tahu poperti yang namanya align, dan penerapan di HTML-nya kurang lebih seperti ini :
<p align="center">Hello World!</p>Jika pada CSS mungkin seperti ini penulisannya :
p { text-align: center; }Kode diatas biasanya digunakan untuk mengatur posisi teks, seperti teks judul, paragram atau yang lainnya yang berhubungan sama typography, namun tidak menutup kemungkinan juga di gunakan untuk mengatur posisi komponen seperti tombol, gambar atau yang lainnya.
Namun alangkah baiknya untuk mengatur posisi komponen selain teks, di sarankan untuk tidak menggunakan properti text-align, Kamu bisa menggunakan opsi lain seperti justify-content dan Flex atau place-items dari Grid.
Sebenarnya tidak ada aturan baku atau larangan yang melarang kita menggunakan properti text-align untuk mengatur komponen lain selain teks.
Perlu kamu tahu, setiap hal yang di buat pasti memiliki tujuan, kelemahan atau pun kelebihan, seperti halnya properti text-align.
Ibarat kita mau memotong sebuah tempe dan pilihan alatnya ada pisau dan golok, kira-kira kamu bakal memilih menggunakan apa? pisau atau golok?; Pada dasarnya keduanya bisa digunakan untuk memotong tempe, namun alangkah tidak efektifnya untuk memotong sebuah tempe kita sampai harus menggunakan golok.
Kira-kira sampai sini sudah bisa memahaminya? Jika sudah paham mari kita lanjut.
Pada kasus ini, jika kita ingin mengatur posisi tengah yang mana itu bukanlah sebuah teks, melainkan sebuah komponen seperti tombol, table atau yang lainnya, disarankan menggunakan opsi lain, seperti justify-content dari flex atau place-items dari grid. Untuk contoh penggunaannya kurang lebih seperti ini :
See the Pen Simple code for Centering anything with CSS (FLEX & GRID) by Kang cahya (@cahyadyazin) on CodePen.
Mungkin cukup sekian dulu untuk pembahasan kali ini, untuk kurangnya saya ucapkan mohon maaf dan untuk lebihnya silahkan kamu ambil saja, sekita dan terimakasih :)
Posting Komentar