CSS text-align özelliği, bir metne yatayda hizalama vermek için kullanılır. Bir yazı ortalanabilir(center), sola/sağa yaslanabilir (left/right) ya da satırdaki diğer yazılara göre hizalanabilir(justify). Bir örnekle metin hizalamasına açıklık getirmek için makalenin devamına bakmalısın.

İçerik göster

CSS text-align Nedir, Nasıl Kullanılır?

Değer	Açıklama
center	yazıyı ortalar.
right	yazıyı sağa dayar.
left	yazıyı sola dayar(varsayılanı budur)
justify	iki yana yaslar

Tablodaki değerleri kullanarak alttaki kod bloğunda görüldüğü gibi bir örnek oluşturalım ve sonrasında bu elementlerin bazılarına CSS kısmındaki gibi bazı stiller uygulayalım.

Html

<h2>Ortalı Başlık</h2>
<ul>
    <li class="isim">Sağa dayalı yazar adı</li>
    <li class="makale">justify olarak atanan text-align özelliği sayesinde bu uzun yazıyı okurken eğer tarayıcıyı büyütüp küçültürsen, yazının düzenini koruduğunu göreceksindir. Birçok haber sitesi ve blog bu özellikten faydalanır.</li>
</ul>

<h2>Ortalı Başlık</h2>

<ul>

<li class="isim">Sağa dayalı yazar adı</li>

<li class="makale">justify olarak atanan text-align özelliği sayesinde bu uzun yazıyı okurken eğer tarayıcıyı büyütüp küçültürsen, yazının düzenini koruduğunu göreceksindir. Birçok haber sitesi ve blog bu özellikten faydalanır.</li>

</ul>

CSS

h2          { text-align:center;    }
li.makale   { text-align:justify;   }
li.isim     { text-align:right;     }

h2 { text-align:center; }

li.makale { text-align:justify; }

li.isim { text-align:right; }

Sonuç

Üstteki css ve html kodlarımızın sonucunu alttaki editörden görebilirsiniz ve isterseniz Result kısmından sonucu görebilir yada ilgili html ve css kodlarını değiştirerek denemeler yapabilirsiniz.

Gördüğünüz gibi css üzerinde metinlerin sağa sola yaslama, ortalama yada iki yana yaslı gösterme işini css’in text-aling özelliği ile kolayca yapabiliyoruz. CSS üzerinde metinlerimize stil verebilmek ve onları şekillendirmek için onlarca farklı özellik bulunmaktadır diğer css özellikleri ve makaleleri için CSS kategorisine gözatabilirsiniz. Ayrıca CSS ile alakalı yada development ile alakalı makalelerden haberdar olmak için mail yada tarayıcı bildirimi ile abone olmayı unutmayın.

Tarayıcı Desteği

Data on support for the mdn-css__properties__text-align feature across the major browsers

📚 Kaynaklar

https://www.w3schools.com/cssref/pr_text_text-align.asp

📚 İlgilenebileceğiniz Diğer Makalelerimiz

✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.

🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.

👋 Bir sonraki makalede görüşmek dileğiyle.

4.7/5 - (3 votes)

Kategoriler

Bloga e-posta ile abone ol

CSS text-align Nedir, Nasıl Kullanılır?