CSS ile yatayda ortalamak deyince aklımıza hep genişliği sabit olan alanlar geliyor. Ancak genişliği sabit olmayan elemanları ortalamak biraz daha farklı oluyor.
Genişliği sabit olan blok-level elemanları ortalamak için birçok kaynak var iken genişliği belli olmayan blok-level elemanları ortalamak için çok fazla kaynak bulamıyoruz. Google’da yaptığım aramalarda rastladığım makalelerde 2 yöntem ile karşılaştım. Bu iki metodu sizlerle paylaşacağım, siz kendinize uygun olan metodu uygulayabilirsiniz.
Metot 1 - Yüzde Yöntemi ile Ortalama
Genelde bu yöntemi anlatırken menü örnekleri üzerinden anlatılmış bende geleneği bozmayayım.
Alışkın olduğumuz bir menü kodu. CSS kodumuzu ekleyelim. İlk olarak kapsayıcı eleman tanımlarını yazalım.
Menü kapsayıcısının sayfayı tam kaplaması için %100 değeri ve float:left değeri atandı.
float:left değeri ile içeriği çepeçevre kapsaması sağlanıyor. left:50% değeri ile menu ortalanıyor. Ancak bu ortalama içeriğin genişliğiniiçermez.
Buradaki püf noktası; right:50% değeri ile menü genişliğinden dolayı sağa doğru kayan içeriği tam olarak ortalı hale getiriyoruz.
İnternet Explorer 6+, Firefox2+, Safari, Chrome ve Opera destekliyor.
Avantajları
- Tüm tarayıcılar destekliyor.
- Sadece CSS ile çözüm ürettiği için ve javascripte gerek bırakmaması
- Kolay kullanımı
- Farklı tarayıcılar için farklı kod yazımı gerektirmemesi
Dezavantajları
- Kapsayıcı elemana atana overflow:hidden nedeni ile yaşanabilecek olumsuzluklar. Mesela açılır menülerde sorun olur.
- Ortalanacak eleman kapsayıcısı, yani burada ul ortalı olmadığı için background, border ve kendini gösterecek diğer tanımların yapılmaması gerekir. Buda bir dezavantajdır.
Metot 2: display:table Metodu
Genişliği belli olan elemanları ortalarken kullandığımız margin:0 auto tanımını bu sefer genişliği belli olmayan alanlar içinde kullanıyoruz.
HTML kodumuz aynı;
Ortalanacak alana margin:0 auto ve display:table tanımlarını yapıyoruz.
Sonuç istediğimiz gibi, ancak bir sorunumuz varki oda display:table özelliğini İnternet Explorer 6 ve 7. sürümleri desteklemiyor. Peki, ne olacak derseniz bu bir hasLayout sorunu ve çözüm için zoom:1 tanımı kullanmamız gerekiyor.
Kapsayıcı kapsüle text-align:center tanımı yapıyoruz sonra listemize display:inline yapıyoruz. text-align:center inline elemanları ortalıyor bildiğiniz gibi. Burada yaptığmızda bu
Avantajları
- Tüm tarayıcılar destekliyor.
- Sadece CSS ile çözüm ürettiği için ve javascripte gerek bırakmaması
- Birinci mettodaki overflow:hidden dan kaynaklana sorun burada yoktur.
- Birinci metotdaki ul ye görsel özellik tanımlayamama sorunu bu metotda yok.
Dezavantajları
- Farklı tarayıcılar için farklı kod yazımı gerektirmesi
Kullandıkça avantaj ve dezavantajlarını daha iyi göreceğiz.
Kalın sağlıcakla.
Kaynaklar
- css-discuss.incutio.com/wiki/Centering_Block_Element
- http://www.solstice.co.il/blog/2008-02-26/horizontally-centering-content-dynamic-width-css
- http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
- http://haslayout.net/css-tuts/Horizontal-Centering
- http://www.katcode.com/css-horizontally-centering-div-of-unknown-width/
- http://www.tightcss.com/centering/center_variable_width.htm