Metin hizalama - CSS Hileleri

Anonim

CSS'deki text-alignözellik, bir blok öğesinin iç içeriğini hizalamak için kullanılır.

p ( text-align: center; )

Bunlar, metin hizalama için geleneksel değerlerdir:

  • left- Varsayılan değer. İçerik, sol taraf boyunca hizalanır.
  • right - İçerik sağ taraf boyunca hizalanır.
  • center- Sol ve sağ kenarlar arasında içerik merkezleri. Her satırın sol ve sağ tarafındaki beyaz boşluk eşit olmalıdır.
  • justify - İçerik, mümkün olduğunca çok sayıda bloğun bir satıra sığması ve bu satırdaki ilk kelimenin sol kenarda ve son sözcüğün sağ kenarda olması için boşluklar oluşturur.
  • inherit - Değer, ana öğe ne olursa olsun olacaktır.

"İçerik" burada "metin" yerine terim olarak kullanılmıştır, çünkü metin hizalama kesinlikle metni etkilerken, bu kaptaki tüm satır içi veya satır içi blok öğeleri etkiler.

CSS3'te de başlangıç ​​ve bitiş olmak üzere iki yeni değer var. Bu değerler çoklu dil desteğini kolaylaştırır Örneğin, İngilizce soldan sağa (ltr) bir dildir ve Arapça sağdan sola (rtl) bir dildir. Değerler için "sağ" ve "sol" kullanmak çok katıdır ve yön değiştikçe uyum sağlamaz. Bu yeni değerler uyum sağlar:

  • start - ltr'deki "sol" ile aynı, rtl'deki "sağ" ile aynı.
  • end - ltr'deki "sağ" ile aynı, rtl'deki "sol" ile aynı.

Ayrıca, match-parentbuna benzer inherit, sadece yeni değer, bunu yapmamak yerine, mevcut elemanın yönüne göre hesaplanır.

Spesifikasyonda henüz tarayıcı desteğine sahip olmayan birkaç şey var. Bunlardan biri, ilk satırı "başlangıç" ve sonraki satırları "bitiş" gibi hizalayan "başlangıç ​​bitiş" değeridir. Bir diğeri, değere bir dize vermektir, örneğin text-align: "." start;Metin, ondalık bir nokta boyunca bir sayı sütununu sıralamak gibi, bunun ilk oluşumu boyunca hizalanacaktır.

Örnekler

Bu metin sola hizalanmıştır.

Bu metin sağa hizalıdır.

Merkezliyim!

Ben haklıyım Zaman zaman biraz uzatmam gerekse bile, boşluğu tam olarak dolduruyorum (son satır hariç).

Ebeveynimin uyumunu miras alırım. Bu durumda sol demektir.

Tarayıcı Desteği

Sol, sağ, merkez için iki yana yasla:

Krom Safari Firefox Opera IE Android iOS
Hiç Hiç Hiç 3.5+ 3+ Hiç Hiç

İçin startve enddeğerler:

Krom Safari Firefox Opera IE Android iOS
Hiç 3.1+ 3.6+ Yok Yok Hiç Hiç