Teks-rata - Trik CSS

Anonim

The text-alignproperti di CSS digunakan untuk menyelaraskan isi dalam dari elemen blok.

p ( text-align: center; )

Ini adalah nilai tradisional untuk perataan teks:

  • left- Nilai default. Konten sejajar di sepanjang sisi kiri.
  • right - Konten sejajar di sepanjang sisi kanan.
  • center- Pusat konten antara tepi kiri dan kanan. Ruang putih di sisi kiri dan kanan setiap baris harus sama.
  • justify - Isi spasi sedemikian rupa sehingga sebanyak mungkin blok masuk ke dalam satu baris dan kata pertama pada baris itu berada di sepanjang tepi kiri dan kata terakhir di sepanjang tepi kanan.
  • inherit - Nilainya akan menjadi apa pun elemen induknya.

"Konten" digunakan di sini sebagai istilah, bukan "teks", karena meskipun perataan teks pasti memengaruhi teks, hal itu memengaruhi semua elemen blok sebaris atau sebaris di penampung itu.

Ada dua nilai baru di CSS3 juga, start dan end. Nilai-nilai ini membuat dukungan beberapa bahasa menjadi lebih mudah Misalnya, bahasa Inggris adalah bahasa kiri-ke-kanan (ltr) dan bahasa Arab adalah bahasa kanan-ke-kiri (rtl). Menggunakan "kanan" dan "kiri" untuk nilai terlalu kaku dan tidak beradaptasi saat arah berubah. Nilai-nilai baru ini beradaptasi:

  • start - Sama seperti "left" di ltr, sama dengan "right" di rtl.
  • end - Sama seperti "kanan" di ltr, sama dengan "kiri" di rtl.

Ada juga match-parent, yang mirip dengan inherit, hanya nilai baru yang dihitung terhadap arah elemen saat ini, bukan, Anda tahu, tidak melakukan itu.

Ada beberapa hal dalam spesifikasi yang belum memiliki dukungan browser apa pun. Salah satunya adalah nilai "awal akhir" yang akan menyelaraskan baris pertama seolah-olah adalah "mulai" dan setiap baris berikutnya seolah-olah "akhir". Cara lainnya adalah memberikan nilai string, seperti text-align: "." start;Teks akan sejajar di sepanjang kejadian pertama, seperti untuk berbaris kolom angka di sepanjang titik desimal.

Contoh

Teks ini rata kiri.

Teks ini rata kanan.

Saya terpusat!

Saya dibenarkan. Saya mengisi ruang dengan tepat (kecuali pada baris terakhir), bahkan jika saya harus meregangkan sedikit waktu.

Saya mewarisi kesejajaran orang tua saya. Dalam hal ini, itu berarti kiri.

Dukungan Browser

Untuk kiri, kanan, tengah, rata:

Chrome Safari Firefox Opera YAITU Android iOS
Apa saja Apa saja Apa saja 3.5+ 3+ Apa saja Apa saja

Untuk nilai startdan end:

Chrome Safari Firefox Opera YAITU Android iOS
Apa saja 3.1+ 3.6+ Tidak ada Tidak ada Apa saja Apa saja