Atribut text-align CSS

Definisi dan penggunaan

Atribut text-align menentukan cara penataan horizontal teks dalam elemen.

Atribut ini menetapkan cara penataan horizontal teks dalam elemen blok melalui penentuan titik yang digunakan untuk menempatkan baris dan baris. Dengan memungkinkan peramban pengguna mengatur jarak antara huruf dan kata dalam konten baris, nilai justify dapat didukung; hasil yang berbeda dapat diperoleh oleh peramban pengguna yang berbeda.

Lihat pula:

Pelajaran CSS:Teks CSS

Panduan HTML DOM:Atribut textAlign

Contoh

Atur cara penataan teks elemen h1, h2, h3:

h1 {text-align:center;}
h2 {text-align:left;}
h3 {text-align:right;}

Coba sendiri

Sintaks CSS

text-align: left|right|center|justify|initial|inherit;

Nilai atribut

Nilai Deskripsi
left Letakkan teks di kiri. Nilai default: di tentukan oleh peramban.
right Menata teks ke kanan.
center Menata teks ke tengah.
justify Mencapai efek teks yang teratur di kedua ujung.
inherit Tentukan nilai atribut text-align yang diwarisi dari elemen induk.

Nilai justify

Atribut penataan horisontal terakhir adalah justify, yang membawa beberapa masalah sendiri.

Nilai justify dapat membuat teks di kedua ujung teratur. Dalam teks yang teratur di kedua ujung, ujung kiri dan kanan baris teks disebutkan di dalam batas dalam elemen induk. Lalu, atur jarak kata dan huruf untuk membuat panjang setiap baris sama. Anda mungkin sudah mengetahui bahwa teks yang teratur di kedua ujung umumnya digunakan di bidang cetak. Namun, di CSS, masih perlu berpikir lebih banyak.

Harus ditentukan oleh agen pengguna (tidak ada CSS) untuk menentukan bagaimana teks yang teratur di kedua ujung dijalankan untuk memenuhi ruang antar sisi kiri dan kanan elemen induk. Misalnya, beberapa browser hanya menambahkan ruang ekstra di antara kata, sementara beberapa browser lainnya mungkin menyebarluaskan ruang ekstra di antara huruf (walaupun spesifikasi CSS menekankan, jika) Atribut letter-spacingDitetapkan sebagai nilai panjang, "agen pengguna tidak dapat menambah atau mengurangi ruang antar karakter"). Beberapa agen pengguna mungkin akan mengurangi ruang beberapa baris, sehingga teks menjadi lebih rapat. Semua cara ini akan mempengaruhi penampilan elemen, bahkan mengubah tingginya, tergantung berapa banyak pilihan penataan yang dipengaruhi oleh agen pengguna yang mempengaruhi baris teks.

CSS juga tidak menentukan bagaimana untuk menangani tanda hubung (catatan 1). Sebagian besar teks yang teratur di kedua ujung biasanya menggunakan tanda hubung untuk memisahkan kata yang panjang di antara dua baris, sehingga mengurangi jarak antar kata, dan memperbaiki penampilan baris teks. Namun, karena CSS tidak mendefinisikan perilaku tanda hubung, agen pengguna jarang sekali untuk otomatis menambahkan tanda hubung. Oleh karena itu, teks yang teratur di kedua ujung di CSS terlihat kurang bagus seperti halnya yang dicetak, terutama jika elemen mungkin terlalu sempit, sehingga hanya dapat menempatkan beberapa kata per baris. Tentu saja, menggunakan elemen desain sempit adalah hal yang boleh, tetapi perhatikan kelemahan yang berhubungan.

Catatan 1:CSS tidak menjelaskan bagaimana untuk menangani tanda hubung, karena berbagai bahasa memiliki aturan tanda hubung yang berbeda. Spesifikasi tidak mencoba untuk menggabungkan aturan yang mungkin tidak lengkap, tetapi dengan jujur tidak menyebutkan masalah ini.

Detil teknis

Nilai default: Jika atribut direction adalah ltr, nilai defaultnya adalah kiri; jika direction adalah rtl, maka nilai defaultnya adalah kanan.
Inheritsi: ya
Versi: CSS1
Sintaks JavaScript: object.style.textAlign="kanan"

Beberapa contoh lainnya

Mengeksentrikkan teks
Contoh ini menunjukkan bagaimana cara untuk mengeksentrikkan teks.

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini sepenuhnya.

Chrome IE / Edge Firefox Safari Opera
1.0 3.0 1.0 1.0 3.5