Çok uzun bir aradan sonra, bulduğum ilk boşlukta kısa bir yazı yazayım dedim. Başlık biraz uzun oldu ama, aşağıda anlatacağım olay bundan ibaret olacak..

Geçenlerde bir proje gereği yapmak zorunda kaldığım bir durumdu bu.. Yararlı olacağını düşünüyorum.

Aslında kendim başka bir şekilde yapmıştım ancak, nette daha kısa bir yol buldum onu burada size aktaracağım.

Bazı arkadaşlar; ne gerek var kardeşim!!  margin: 0 auto; yap, olsun bitsin diyebilirler.. Katmanımızda (div) absolute pozisyonlama kullandığımızda yukarıdaki margin değerleri çalışmaz.

Ozaman absolute kullanma diyenler de olabilir. Çok karmaşık, özellikle parçalı ve dinamik background (arkaplan) yapılarında kullanmak zorunda kalıyorsunuz. Çünkü arkaplanınızın her çözünürlükte düzgün çıkmasını istiyorsunuz ve sonuçta en kısa yoldan içeriğinizin bulunacağı katmanınızı absolute yapıyorsunuz.

Bu yolun en güzel tarafı çoğu browserda çalışyor olması.. Özellikle ie6, ie7 de çalışıyor.

Code block

#merkez {
  width: 300px;
  position: absolute;
  top: 50px;
  left: 50%;
  margin-left: -150px;
}

Yukarıdaki css stil kodu ile “merkez” id’li katmanımı (div) sahnede ortalıyorum. Genişliği 300 pixel olan katmanımı, yüzde elli, yani sayfanın yarısı kadar soldan içeriye doğru konumlandırıyorum. Tam merkeze almak içinde; genişliğin yarısı kadar negatif (-) margin değeri veriyorum.

Evet bu kadar basit..

Örnek çalışmayı buradan görebilirsiniz, yada dosyayı buradan indirebilirsiniz. Teşekkürler..