HTML YAZI VE RESİM ORTALAMA

[guclusat]

Modern HTML5 ve CSS ile Metin ve Resim Ortalama Teknikleri​

Neden Eski "Center" Etiketini Kullanmamalıyız?​

Eskiden kullanılan

<center>

etiketi HTML5 ile birlikte tamamen kullanımdan kaldırılmıştır. Google ve diğer arama motorları, içeriğin stili için HTML etiketleri yerine CSS kullanılmasını (Separation of Concerns) önerir. Bu durum sitenizin SEO performansını ve mobil uyumluluğunu doğrudan etkiler.

1. En Güncel Yöntem: CSS ile Metin Ortalama (SEO Dostu)​

Metinleri ortalamanın en temiz yolu

text-align: center;

özelliğini kullanmaktır.

HTML ve Satır İçi CSS:

<div style="text-align: center;">
    <p>Bu metin modern yöntemle ortalanmıştır.</p>
</div>

2. Resim ve Objeleri Ortalama (Blok Eleman Yöntemi)​

Resimler doğası gereği "inline" (satır içi) elemanlardır. Modern web tasarımında resimleri ortalamak için en güvenli yol budur:

<div style="display: block; margin-left: auto; margin-right: auto; width: 50%;">
    <img src="resim-adresi.jpg" alt="Açıklayıcı Resim Metni">
</div>

*Not: Resimlerde her zaman alt etiketi kullanmak SEO için hayati önem taşır.*

3. Profesyonel Yöntem: Flexbox ile Tam Hizalama​

Hem dikey hem de yatayda tam orta noktayı bulmak istiyorsanız, modern tarayıcıların gözdesi Flexbox kullanmalısınız:

<div style="display: flex; justify-content: center; align-items: center; height: 100px;">
    <span>Tam ortadaki içerik</span>
</div>

Özet: Hangi Yöntem Daha İyi?​

• Basit metinler için: text-align: center;
• Resimler için: Margin: auto; veya Flexbox.
• SEO Avantajı: Kodlarınız ne kadar temiz ve standartlara uygun (W3C) olursa, Google sayfayı o kadar hızlı tarar ve üst sıralara taşır.