CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs.
Pada tutorial kali ini kita akan belajar tentang properti css text-align, yuks ikuti pembahasanya
Sintak
Sintaks untuk properti CSS
text-align adalah:
text-align: value;
Parameter atau Argumen value
- Perataan teks dapat berupa salah satu dari berikut ini:
Nilai |
Keterangan |
---|
left |
Teks rata kiri div { text-align: left; } |
right |
Teks rata kanan div { text-align: right; } |
center |
Teks ditengah div { text-align: center; } |
justify |
Teks disesuaikan (yaitu: berbaris di tepi kiri dan kanan paragraf) div { text-align: justify; } |
start |
Jika arahnya kiri-ke-kanan, teks akan rata kiri. Jika arahnya dari kanan ke kiri, teks akan rata kanan. div { text-align: start; } |
end |
Jika arahnya kiri-ke-kanan, teks akan rata kanan. Jika arahnya dari kanan ke kiri, teks akan rata kiri. div { text-align: end; } |
inherit |
Elemen akan mewarisi perataan teks dari elemen induknya div { text-align: inherit; } |
Catatan
- Properti text-align hanya menyelaraskan konten sebaris (yaitu: teks) dari elemen di dalam elemen blok induknya.
- Properti text-align tidak menyelaraskan elemen blok itu sendiri, hanya konten sebaris.
Kompatibilitas Peramban
Properti perataan teks CSS memiliki dukungan dasar dengan browser berikut:
- Chrome
- Android
- Firefox
- Microsof Edge
- Opera
- Safari
Contoh
Kita akan membahas properti text-align di bawah ini, mengeksplorasi contoh bagaimana menggunakan properti ini di CSS.
Menggunakan Center
Mari kita lihat contoh text-align CSS di mana kita membuat teks rata tengah.
div { text-align: center; }
Dalam contoh perataan teks CSS ini, kita telah menggunakan
center di tag <div>.
Menggunakan Left
Selanjutnya, mari kita lihat contoh perataan teks CSS di mana kita menyelaraskan teks ke kiri.
div { text-align: left; }
Dalam contoh perataan teks CSS ini, kita telah meratakan kiri teks di tag <div>.
Menggunakan Right
Mari kita lihat contoh perataan teks CSS di mana kita menyelaraskan teks dengan benar.
div { text-align: right; }
Dalam contoh perataan teks CSS ini, kita telah meratakan kanan teks di tag <div>.
Baca artikel lainya :