CSS text-align özelliği

tanım ve kullanım

text-align özelliği, eleman içindeki metnin yatay hizalama tarzını belirtir.

Bu özellik, satır çubuğunu hangi noktaya hizaladığını belirleyerek, blok elementi içindeki metnin yatay hizalama tarzını ayarlar. Harfler ve kelimeler arasındaki boşlukları kullanıcı aracısı tarafından ayarlamaya izin vererek, yükle değeri destekler; farklı kullanıcı aracılar farklı sonuçlar elde edebilir.

Ayrıca bkz.:

CSS eğitim:CSS Metin

HTML DOM referans el kitabı:textAlign özelliği

örnek

h1, h2, h3 elemanlarının metin hizalama tarzını ayarlayın:

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

Kişisel olarak deneyin

CSS dilbilgisi

text-align: sol|sağ|merkez|yükle|ilk|devralım;

özellik değeri

değer tanım
sol Metni solda düzenleyin. Varsayılan değer: Tarayıcı tarafından belirlenir.
sağ Metni sağa yerleştirir.
center Metni ortaya yerleştirir.
justify İki uçta hizalı metin etkisi elde etmek için
inherit Ebeveyn elemanın text-align özelliğinin değerini devralır.

Değer justify

Sonraki yatay hizalama özelliği justify'dir ve kendi sorunlarını getirir.

Değer justify, metnin her iki ucunu da hizalayabilir. İki uçta hizalı metinde, metin satırlarının her iki ucunda da ebeveyn elemanın iç sınırlarına yerleştirilir. Ardından, kelime ve harf aralarındaki boşlukları ayarlayarak her satırın uzunluğunu eşit hale getirilir. Belki de iki uçta hizalı metnin yazdırılmış gibi görünmediğini fark ettiniz. Ancak, CSS'te bu konuda daha fazla dikkat edilmesi gerekmektedir.

Kullanıcı aracı (CSS yerine) tarafından, iki uçta hizalı metnin nasıl genişletileceği ve ebeveyn elemanın sol ve sağ sınırları arasındaki boşluğu dolduracağı belirlenmelidir. Örneğin, bazı tarayıcılar sadece kelime aralarına ekstra boşluk eklerken, diğerleri harf aralarındaki ekstra boşluğu eşit olarak dağıtabilir (Ancak CSS standartı, eğer belirtilmemişse, ekstra boşluğun harf aralarında nasıl dağıtılacağını belirtir). letter-spacing özelliğiBir uzunluk değeri olarak belirlenir, "kullanıcı aracı karakter aralarındaki boşluğu daha fazla artırmak veya azaltmak olamaz"). Bazı kullanıcı aracılar, bazı satırların boşluğunu azaltarak metni daha sıkıştırabilir. Tüm bu yöntemler, elemanın görünümünü etkileyebilir ve hatta yüksekliğini değiştirebilir, bu da kullanıcı aracının hizalama seçimlerinin ne kadar çok satırı etkilediğine bağlıdır.

CSS, tirelerin nasıl işleneceğini de belirtmemektedir (not 1). Çoğu iki uçta hizalı metin, uzun kelimeleri iki satır arasında tire ile ayırarak kelime aralarındaki boşlukları daraltmak ve metin satırlarının görünümünü iyileştirmek için tire kullanır. Ancak, CSS'nin tire davranışını tanımlamadığı için, kullanıcı aracı otomatik olarak tire eklemek olası değildir. Bu nedenle, CSS'te iki uçta hizalı metin, yazdırılmış gibi görünmez, özellikle eleman çok dar olursa ve her satırda sadece birkaç kelime yerleştirilebilir. Elbette, dar tasarım elemanları kullanılabilir, ancak dikkatli olun, çünkü bu, ilgili dezavantajları da beraberinde getirir.

Not 1:CSS, farklı dillerin farklı tire kurallarına sahip olduğundan, tireleri nasıl işleyeceğine dair bir açıklama yapmamaktadır. Standart, bu gibi muhtemelen eksik olan bazı kuralları dengelemeye çalışmak yerine, bu sorunu açıkça belirtmemiştir.

Teknik ayrıntılar

Varsayılan değer: Eğer direction özelliği ltr ise, varsayılan değeri sol; eğer direction rtl ise sağdır.
Geçirsizlik: evet
Sürüm: CSS1
JavaScript dilbilgisi: object.style.textAlign="right"

Daha fazla örnek

Metni hizalama
Bu örnek, metni nasıl hizalayacağınızı gösterir.

Tarayıcı desteği

Tablo içindeki rakamlar, bu özelliği tamamen destekleyen ilk tarayıcı sürümünü belirtmektedir.

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