- 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:
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.