[CSS/DIV] CSS sayfa yatay ortalamalarını mükemmel şekilde çözer

Elemanları yatay merkeze yerleştirmek için yaygın bir CSS yöntemi

CSS ile öğeleri merkezlemek basit bir mesele değil - aynı geçerli CSS merkezleme ayarları farklı tarayıcılarda farklı davranıyor. CSS'de elemanları yatay olarak merkezlemenin birkaç yaygın yoluna bakarak başlayalım.

1. Otomatik kenar çizgileriyle merkezleme

CSS'de elemanları yatay olarak ortalamanın tercih edilen yolu kenar özelliğini kullanmaktır—sadece marjina-sol ve marja-sağ özelliklerini otomatik olarak ayarlayın. Pratikte kullanımda, merkezlenmesi gereken bu elementler için bir konteyner div oluşturabiliriz. Bir şey de belirtilmelidir: Kabın genişliği belirtilmeli:

div#container{ margin-left:auto; kenar-sağ:auto; genişlik: 168px; }

Bu yaklaşım çoğu büyük tarayıcıda çok iyi çalışır, hatta Windows'ta IE6 bile standart uyumluluk modunda düzgün şekilde görüntülenebilir. Ne yazık ki, IE'nin alt sürümlerinde bu ayar merkezleme etkisi yaratmaz. Bu yöntemi gerçek bir projede kullanmak istiyorsanız, kullanıcının IE tarayıcı sürümünün 6.0'dan düşük olmadığından emin olun.

Destek olmamasına rağmen, çoğu tasarımcı bu yaklaşımı mümkün olduğunca kullanmayı öneriyor. Bu yöntem, CSS ile eleman düzeyinde merkezleme uygulamanın tüm yöntemleri arasında en doğru ve makul olarak kabul edilir.

2. Metin hizalamasını kullanarak merkezleme elde edin

Öğe merkezleştirmenin bir diğer yolu metin hizalama özelliğini kullanmak, özelliğin değerini merkeze ayarlamak ve gövde öğesine uygulamaktır. Baştan sona bir hack ama çoğu tarayıcıyla uyumlu, bu yüzden bazı durumlarda doğal olarak vazgeçilmez.

Buna hack denir çünkü bu yöntem metne metin özelliklerini değil, konteyner olan öğeye uygular. Bu da bize ekstra iş imkanı sağlıyor. Düzen için gerekli div'leri oluşturduktan sonra, metin-hizalama özelliğini gövdeye aşağıdaki koda göre uygulamamız gerekiyor:

body{ metin-hizalama:center; }

Bundan sonra herhangi bir sorun olacak mı? Bedenin tüm soyundan gelenler merkeze yerleştirilmiştir.

Bu nedenle, metni varsayılan sol hizalama döndürmek için başka bir kural yazmamız gerekiyor:

p{ metin-hizala:left; }

Bu ek kuralın bazı rahatsızlıklara yol açması düşünülebilir. Ayrıca, standardı gerçekten takip eden bir tarayıcı konteynerin konumunu değiştirmez, sadece metni ortalayar.

3. Otomatik kenar kenarları ve metin hizalamasının bir kombinasyonunu kullanın

Metin hizalama merkezleme yöntemi iyi bir geriye doğru uyumluğa sahip olduğu ve otomatik doldurma yöntemi çoğu çağdaş tarayıcı tarafından da desteklendiği için, birçok tasarımcı merkezleme etkisini en üst düzeye çıkarmak için tarayıcılar arası desteği en üst düzeye çıkarmak amacıyla ikisinin kombinasyonunu kullanır:

body{ metin-hizalama:center; } #container{ kenar-sol:auto; kenar-sağ:auto; border:1pxsolidred; genişlik: 168px; metin-hizalama:sol }

Ama bu her zaman bir hiledir ve kesinlikle mükemmel değildir. Metin için merkezlenmiş konteyner için ek kurallar yazmamız gerekiyor, ama en azından çeşitli tarayıcılarda iyi görünüyor.

4. Negatif dış marj çözümü

Negatif marj çözümleri, elementlere negatif marj eklemek kadar basit olmaktan çok uzaktır. Bu yöntem hem mutlak konumlandırma hem de negatif marj tekniklerinin kullanılmasını gerektirir.

Aşağıda bu şemanın özel uygulama yöntemi yer almaktadır. Öncelikle, ortalanmış öğelerle bir kap oluşturun ve sayfanın sol kenarının kesinlikle %50'sine yerleştirin. Bu şekilde, konteynerin sol kenarı sayfanın genişliğinin %50'sinden başlayacak.

Sonra, konteynerin sol marj değerini negatif konteyner genişliğinin yarısı olarak ayarlayın. Bu, konteyneri sayfanın yatay yönünün ortasında sabitler.

#container{ background:#ffcurl(mid.jpg)repeat-ycenter; pozisyon: mutlak; sol:%50; genişlik: 760px; kenar-sol:-380px; }

Bakın, hileyle yok! Bu tercih edilen çözüm olmasa da, iyi bir yol ve çok yönlü – şaşırtıcı bir şekilde, NetscapeNavigator 4.x'te bile sorunsuz çalışmıyor, değil mi? Yani en geniş tarayıcı desteği yelpazesini istiyorsanız, bu yöntem en iyi seçim olacaktır.