Cara Membuat Tulisan Berada di Tengah Secara Horizontal & Vertical - CSS
Hi teman - teman programmer, ini adalah tulisan pertama saya di blog ini, disini saya tidak bermaksud untuk menggurui teman - teman tapi lebih ke sharing ilmu saja. Disini saya juga masih tahap belajar, dan apa saya pelajari saya tulis disini.
Jika ada kesalahan dalam penjelasannya, mohon untuk di koreksi, saya sangat terbuka menerima kritikan dan masukan.
Dipostingan pertama ini saya mau berbagi bagaimana caranya agar tulisan ada di tengah baik secara horizontal dan vertikal.
Berikut ini hasil dari program yang saya maksud.
Code atau script di atas akan membuat kalimat "TULISAN DI TENGAH" yang berada dalam tag <h2> akan berada di tengah - tengah body, baik secara vertikal maupun secara horizantal.
Penjelasan : untuk body kita beri margin dan padding 0, sehingga tidak ada spasi sama sekali, dan kita beri backround body dengan springgreen.
Selanjutnya untuk tag h2 kita atur posisinya, ukuran fontnya dan tipe fontnya. untuk mengganti ukuran fontnya kita butuh syntax font-size, untuk mengganti tipe fontnya kita gunakan syntax font-family.
Untuk mengatur posisinya di tengah kita gunakan syntax position : absolute, selanjutnya, kita gunakan top: 50%. Code ini digunakan agar element berada di tengah2 dari atas,sedangkan left : 50% digunakan agar element berada di tengah2 dari kiri.
Selanjutnya kita gunakan transform:translate(-50%,-50%). dengan code maka element akan berada di tengah - tengah secara horizontal dan vertikal.
Jika ada kesalahan dalam penjelasannya, mohon untuk di koreksi, saya sangat terbuka menerima kritikan dan masukan.
Dipostingan pertama ini saya mau berbagi bagaimana caranya agar tulisan ada di tengah baik secara horizontal dan vertikal.
Berikut ini hasil dari program yang saya maksud.
Code atau script di atas akan membuat kalimat "TULISAN DI TENGAH" yang berada dalam tag <h2> akan berada di tengah - tengah body, baik secara vertikal maupun secara horizantal.
Penjelasan : untuk body kita beri margin dan padding 0, sehingga tidak ada spasi sama sekali, dan kita beri backround body dengan springgreen.
Selanjutnya untuk tag h2 kita atur posisinya, ukuran fontnya dan tipe fontnya. untuk mengganti ukuran fontnya kita butuh syntax font-size, untuk mengganti tipe fontnya kita gunakan syntax font-family.
Untuk mengatur posisinya di tengah kita gunakan syntax position : absolute, selanjutnya, kita gunakan top: 50%. Code ini digunakan agar element berada di tengah2 dari atas,sedangkan left : 50% digunakan agar element berada di tengah2 dari kiri.
Selanjutnya kita gunakan transform:translate(-50%,-50%). dengan code maka element akan berada di tengah - tengah secara horizontal dan vertikal.
Post a Comment for "Cara Membuat Tulisan Berada di Tengah Secara Horizontal & Vertical - CSS"