Atribut text-align CSS

Definisi dan penggunaan

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

Atribut ini menetapkan cara penarikan teks horisontal dalam elemen blok melalui menentukan titik yang diaturkan garis baris dengan garis baris. Dengan memungkinkan agensi pengguna untuk mengatur jarak antara huruf dan kata dalam konten baris, nilai justify dapat didukung; hasil yang berbeda mungkin diperoleh oleh penggunaan yang berbeda.

Lihat juga:

Panduan CSS:Teks CSS

Panduan DOM HTML:Atribut textAlign

Contoh

Atur cara penarikan teks bagi elemen h1, h2, h3:

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

Coba sendiri

Syarat CSS

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

Nilai atribut

Nilai Penerangan
left Jadikan teks diatur ke kiri. Nilai default: dibuat oleh pengguna browser.
right Letakkan teks di sebelah kanan.
center Letakkan teks di tengah.
justify Mencapai kesan teks jarak kiri dan kanan.
inherit Tentukan untuk mewarisi nilai atribut text-align daripada elemen induk.

Nilai justify

Atribut horizontal yang terakhir adalah justify, yang membawa beberapa masalah sendiri.

Nilai justify dapat membuat teks di kedua sisi sepadan. Dalam teks jarak kiri dan kanan, kiri dan kanan baris teks ditempatkan di bawah batas dalam elemen induk. kemudian, atur jarak kata dan huruf untuk membuat panjang setiap baris sama. Anda mungkin telah perhatikan bahawa teks jarak kiri dan kanan sering digunakan dalam bidang cetak. Walau begitu, dalam CSS, perlu berfikir lebih banyak.

Perlu untuk ditentukan oleh penggunaan pereka (tidak bukan CSS) bagaimana teks jarak kiri dan kanan dipejalankan untuk memenuhi ruang antara sisi kiri dan kanan elemen induk. Contohnya, beberapa pereka mungkin hanya menambah ruang ekstra di antara kata, sementara beberapa pereka lain mungkin mengedarkan ruang ekstra di antara huruf ( walau peraturan CSS menekankan, jika). Atribut letter-spacingDinyatakan sebagai nilai panjang, "penggunaan pereka tidak boleh meningkatkan atau mengurangkan ruang antara huruf"). Beberapa penggunaan pereka mungkin mengurangkan ruang beberapa baris, untuk membuat teks mengekat. Semua cara ini akan mempengaruhi penampilan elemen, bahkan mengubah ketinggian, tergantung berapa banyak pilihan penambahan rata yang mempengaruhi baris teks.

CSS juga tidak menentukan bagaimana hendak menghadapi tanda hubung (catatan 1). Sebagian besar teks jarak kiri dan kanan mengguna pakai tanda hubung untuk memisahkan kata panjang di dua baris, untuk mengurangkan jarak antara kata, dan memperbaiki penampilan baris teks. walau begitu, kerana CSS tidak menentukan tingkah laku tanda hubung, penggunaan perwakilan mungkin kurang berapa untuk menambah tanda hubung secara automatik. Oleh itu, teks jarak kiri dan kanan dalam CSS kelihatan kurang baik daripada yang dicetak, terutama jika elemen mungkin terlalu sempit, sehingga setiap baris hanya dapat menampung beberapa kata. Tentu saja, penggunaan elemen rancangan sempit adalah boleh, tetapi pastikan untuk mengamati kelemahan yang berikutnya.

Catatan 1:CSS tidak menyatakan bagaimana menghadapi tanda hubung, kerana berbagai bahasa mempunyai aturan tanda hubung yang berbeza. Piawaian tidak mencuba untuk diharmonikan beberapa aturan yang mungkin tidak lengkap, melainkan hanya mengabaikan masalah ini.

Butiran teknikal

Nilai lalai: Jika atribut direction adalah ltr, nilai lalai adalah kiri; jika direction adalah rtl, lalai adalah kanan.
Inheritsi: ya
Versi: CSS1
Syarat Bahasa JavaScript: objek.style.textAlign="kanan"

Lebih banyak contoh

Sepadankan teks
Contoh ini memaparkan bagaimana untuk sepadankan teks.

Pembiayaan pereka

Nombor dalam tabel menunjukkan versi pereka paling awal yang menyokong sifat ini sepenuhnya.

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