Bilinmesi gereken
- Metni ortalamak için aşağıdaki kodu kullanın ("[/]" satır sonunu belirtir): .center { [/] metin hizalama: merkez; [/] }.
- Aşağıdaki koda sahip içerik bloklarını ortalayın ("[/]" satır sonunu belirtir): .center { [/] kenar boşluğu: otomatik; [/] genişlik: 80em; [/] }.
- Bir görüntüyü ortalamak için ("[/]" satır sonunu belirtir): img.center { [/] görüntüleme: blok; [/] sol kenar boşluğu: otomatik; [/] sağ kenar boşluğu: otomatik; [/] }.
CSS, öğeleri ortalamanın en iyi yoludur, ancak bunu başarmanın pek çok yolu olduğundan yeni başlayan web tasarımcıları için zor olabilir. Bu makale, metni, metin bloklarını ve görüntüleri ortalamak için CSS'nin nasıl kullanılacağını açıklar.
Metni CSS ile Ortalama
Metni bir sayfada ortalamak için yalnızca bir stil özelliğini bilmeniz gerekir:
.center {
metin hizalama: merkez;
}
Bu CSS satırıyla, .center sınıfıyla yazılan her paragraf, üst öğesi içinde yatay olarak ortalanır. Örneğin, bir bölümün içindeki bir paragraf (o bölümün bir alt öğesi) içinde yatay olarak ortalanır.
HTML belgesinde uygulanan bu sınıfın bir örneği:
Bu metin ortalanmıştır.
Metni text-align özelliğiyle ortalarken, metnin içerdiği öğe içinde ortalanacağını ve tam sayfanın kendisinde ortalanması gerekmediğini unutmayın.
Web sitesi metni söz konusu olduğunda okunabilirlik her zaman önemlidir. Büyük merkeze dayalı metin blokları okunması zor olabilir, bu yüzden bu stili dikkatli kullanın. Bir makalenin teaser metni gibi başlıklar ve küçük metin blokları, ortalandığında genellikle okunması kolaydır; ancak, tam bir makale gibi daha büyük metin bloklarını, tam olarak merkeze hizalanmışsa tüketmek zor olacaktır.
CSS ile İçerik Bloklarını Merkezleme
İçerik blokları HTML kullanılarak oluşturulur.
.center {
kenar boşluğu: otomatik;
genişlik: 80em;
}
Kenar boşluğu özelliği için bu CSS kestirme yolu, üst ve alt kenar boşluklarını 0 değerine ayarlarken sol ve sağ "otomatik" değerini kullanır. Bu esasen mevcut olan herhangi bir alanı alır ve onu görünüm penceresinin iki tarafı arasında eşit olarak bölerek öğeyi etkin bir şekilde ortalar. sayfa.
Burada HTML'de uygulanır:
Bu bloğun tamamı ortalanmış,ancak içindeki metin sola hizalı.
Bloğunuz tanımlanmış bir genişliğe sahip olduğu sürece, kendisini içeren öğenin içinde ortalayacaktır. Bu blokta bulunan metin, içinde ortalanmayacak, sola dayalı olacaktır. Bunun nedeni, metnin web tarayıcılarında varsayılan olarak sola dayalı olmasıdır. Metnin de ortalanmasını istiyorsanız, bölümü ortalamak için bu yöntemle bağlantılı olarak daha önce ele alınan text-align özelliğini kullanabilirsiniz.
Görüntüleri CSS ile Ortalama
Çoğu tarayıcı aynı metin hizalama özelliğini kullanarak görüntüleri ortalanmış olarak gösterse de, W3C tarafından önerilmez. Bu nedenle, tarayıcıların gelecekteki sürümlerinin bu yöntemi görmezden gelme olasılığı her zaman vardır.
Bir görüntüyü ortalamak için metin hizalama kullanmak yerine, tarayıcıya görüntünün blok düzeyinde bir öğe olduğunu açıkça söylemelisiniz. Bu şekilde, diğer bloklarda olduğu gibi ortalayabilirsiniz. Bunu gerçekleştirmek için CSS:
img.center {
Ekran bloğu;
sol kenar boşluğu: otomatik;
sağ kenar boşluğu: otomatik;
}
Ve işte ortalanacak görüntünün HTML'si:
Nesneleri satır içi CSS kullanarak da ortalayabilirsiniz (aşağıya bakın), ancak HTML işaretlemenize görsel stiller eklediğinden bu yaklaşım önerilmez. Unutmayın, stil ve yapı ayrı olmalıdır; HTML'ye CSS stilleri eklemek bu ayrımı bozar ve bu nedenle mümkün olduğunda bundan kaçınmalısınız.
Öğeleri CSS ile Dikey Olarak Ortalama
Nesneleri dikey olarak ortalamak web tasarımında her zaman zor olmuştur, ancak CSS esnek kutu düzeni modülü CSS3'te bunu yapmak için bir yol sağlar.
Dikey hizalama, yukarıda ele alınan yatay hizalamaya benzer şekilde çalışır. CSS özelliği, aşağıdaki gibi dikey hizalıdır:
.vcenter {
dikey hizalama: orta;
}
Tüm modern tarayıcılar bu CSS stilini destekle. Eski tarayıcılarla ilgili sorunlarınız varsa, W3C metni bir kapsayıcıda dikey olarak ortalamanızı önerir. Bunu yapmak için, öğeleri içeren bir öğenin içine yerleştirin; divve üzerine minimum bir yükseklik ayarlayın. İçeren öğeyi bir tablo hücresi olarak bildirin ve dikey hizalamayı "orta" olarak ayarlayın.
Örneğin, işte CSS:
.vcenter {
min-yükseklik: 12em;
ekran: tablo hücresi;
dikey hizalama: orta;
}
Ve işte HTML:
Bu metin kutuda dikey olarak ortalanmıştır.
Görüntüleri ve metni ortalamak için HTML öğesini kullanmayın; kullanımdan kaldırıldı ve modern web tarayıcıları artık onu desteklemiyor. Bu, büyük ölçüde, HTML5'in yapı ve stili net bir şekilde ayırmasına bir yanıttır: HTML yapıyı oluşturur ve CSS stili belirler. Merkezleme, bir öğenin görsel bir özelliği olduğundan (ne olduğundan çok nasıl göründüğü), bu stil HTML ile değil CSS ile işlenir. Sayfalarınızın düzgün görüntülenmesi ve modern standartlara uyması için bunun yerine CSS kullanın.
Internet Explorer'ın Dikey Merkezleme ve Eski Sürümleri
Internet Explorer'ı (IE) ortalamaya zorlayabilir ve ardından yalnızca IE'nin stilleri görmesi için koşullu yorumları kullanabilirsiniz, ancak bunlar biraz ayrıntılı ve çekici değildir. Microsoft'un 2015 için desteği bırakma kararı IE'nin eski sürümleri, ancak, IE kullanım dışı kaldığı için bunu sorun olmaktan çıkaracaktır.