- Konu sahibi
- #1
CSS
Örneğin aşağıdaki tam örnekte başlık ve paragraf kartın içinde ortalanır:
Örnekteki style bloğunu HTML belgesinin head bölümüne, div bloğunu body bölümüne yerleştirin. style etiketini başka bir style etiketinin içine yazmayın. Başlık ile paragraf kart içinde ortalanmış görünüyorsa sonuç başarılıdır. Metin sola yaslı kalıyorsa seçicinin gerçekten
İhtiyaca göre hizalama değerini seçin. Türkçe ve İngilizce gibi soldan sağa yazılan metinlerde
Paragraflarda varsayılan hizalama çoğunlukla sola yakındır; bu nedenle yalnızca farklı bir görünüm istediğiniz kapsayıcıya kural eklemek daha güvenlidir. Uzun metinlerde
Öğenin kendisini ortalamaya çalışmak:
Yanlış kapsayıcıya uygulamak: Hizalanacak metin iç kapsayıcıdaysa kuralı dış öğeye yazmak beklenmeyen sonuç verebilir. Tarayıcı geliştirici araçlarında metnin bulunduğu öğeyi seçip etkin CSS kurallarını kontrol edin.
Dikey hizalamayla karıştırmak:
Hayır. Renk için
Evet. Birden fazla satırlı metinlerde
text-align, bir blok öğesinin içindeki satır içi içeriğin ve metnin yatay hizalamasını belirler. En sık kullanılan değerler left, center, right ve justify değerleridir. Örneğin bir paragrafı ortalamak için p { text-align: center; } yazılır. Bu özellik, öğenin kendisini değil, öğenin içindeki metin veya satır içi öğeleri hizalar.Nasıl çalışır?
text-align genellikle blok, tablo hücresi veya benzeri bir kapsayıcıya uygulanır. Kapsayıcının içindeki metin ve span, a gibi satır içi öğeler verilen hizaya göre yerleşir. Bir div öğesini yatay olarak ortalamak istiyorsanız text-align: center kullanmak yerine öğenin genişliğini ve kenar boşluklarını düzenlemelisiniz; çünkü text-align div'in kendisini taşımaz.Örneğin aşağıdaki tam örnekte başlık ve paragraf kartın içinde ortalanır:
Kod:
<style>
.card {
width: min(100%, 320px);
margin: 0 auto;
text-align: center;
}
</style>
<div class="card">
<h2>CSS kartı</h2>
<p>Bu metin kapsayıcısı içinde ortalanır.</p>
</div>Örnekteki style bloğunu HTML belgesinin head bölümüne, div bloğunu body bölümüne yerleştirin. style etiketini başka bir style etiketinin içine yazmayın. Başlık ile paragraf kart içinde ortalanmış görünüyorsa sonuç başarılıdır. Metin sola yaslı kalıyorsa seçicinin gerçekten
card sınıfına uygulandığını ve daha öncelikli başka bir CSS kuralı bulunmadığını denetleyin. margin: 0 auto kartın kendisini ortalar; text-align: center ise kartın içeriğini ortalar.Değer seçimi
İhtiyaca göre hizalama değerini seçin. Türkçe ve İngilizce gibi soldan sağa yazılan metinlerde
left ve right doğrudan görsel yönü ifade eder. Farklı yazı yönlerini destekleyen arayüzlerde start ve end daha uyumludur; bunlar metnin başlangıç ve bitiş tarafını takip eder.| Değer | Sonuç | Uygun kullanım |
|---|---|---|
left | Metni sola hizalar | Klasik paragraf düzeni |
center | Metni yatayda ortalar | Başlık, kısa duyuru, kart içeriği |
right | Metni sağa hizalar | Özel etiketler veya sayısal içerik |
justify | Genellikle son satır dışında satırları iki kenara yayar | Geniş metin blokları; dikkatli kullanılmalı |
start / end | Yazı yönüne göre hizalar | Çok dilli veya RTL destekli arayüzler |
Paragraflarda varsayılan hizalama çoğunlukla sola yakındır; bu nedenle yalnızca farklı bir görünüm istediğiniz kapsayıcıya kural eklemek daha güvenlidir. Uzun metinlerde
justify kullanıldığında kelimeler arasındaki boşluklar satıra göre değişebilir. Bu görünüm okunabilirliği bozuyorsa left veya start tercih edin.Sık yapılan hatalar
Öğenin kendisini ortalamaya çalışmak:
text-align: center bir blok öğesinin konumunu değiştirmez. Blok öğeyi ortalamak için uygun bir genişlik verip margin-inline: auto kullanabilir veya yerleşime göre Flexbox ya da Grid tercih edebilirsiniz.Yanlış kapsayıcıya uygulamak: Hizalanacak metin iç kapsayıcıdaysa kuralı dış öğeye yazmak beklenmeyen sonuç verebilir. Tarayıcı geliştirici araçlarında metnin bulunduğu öğeyi seçip etkin CSS kurallarını kontrol edin.
Dikey hizalamayla karıştırmak:
text-align yatay hizalamayı düzenler. Metni dikeyde konumlandırmak için kapsayıcının yerleşim yöntemine göre align-items, place-items veya başka uygun bir özellik gerekir.Kaynaklar
Sık sorulan sorular
text-align ile yazının rengini değiştirebilir miyim?
Hayır. Renk için
color, yazı boyutu için font-size, yazı kalınlığı için font-weight kullanılır. text-align yalnızca yatay hizalama görevini üstlenir.Bir satırın yalnızca son satırını hizalayabilir miyim?
Evet. Birden fazla satırlı metinlerde
text-align-last özelliği son satırın hizasını ayrıca belirlemek için kullanılabilir. Ancak bu özellik, tüm metin bloklarını ortalamak veya öğenin kendisini taşımak için kullanılan text-align yerine geçmez.