Css ile dikey ve yatay ortalama
28 Mart 2015 Furkan Atabaş 6.977 Okunma Yorum Yok

Css ile dikey ve yatay ortalama


CSS (3)

Web sitemizdeki nesneleri sayfamıza ortalamak istediğimizde birkaç farklı yöntem ile bu işlemi gerçekleştirebiliriz. Ama her yöntem kesin ve doğru bir yöntem değil. Örneğin sitemizin en dış nesnesi olan #genel  ID değerine ait olan divimizi sayfamızın tam ortasına eklemeye çalışalım. Basit bir yöntem ile

Bu yöntem işe yarayan ve çok fazla bilinip kullanılan bir yöntemdir ama bazı tarayıcılarda sıkıntı çıkarabiliyor. Nesneyi her zaman ortada görmek mümkün olmuyor ve dikey ortalamada işe yaramıyor. Ben bunun yerine position ile olan yöntemi  tercih ediyorum.

Position ile ortalama işlemi şu şekilde gerçekleşiyor.  Css teknolojisine ait position özelliği ile nesnemizi ekranımızın %50 si kadar sağa kaydırıp nesnemizin margin-left özelliğini kendi genişliğinin yarısı kadar geri çekiyoruz. Aşağıdaki kod örneğimizde nesnemiz  900px genişliğindedir.

ID değeri genel olan nesne sayfamıza yatay olarak hizalanmıştır.

css ile nesne ortalama

Aynı şekilde nesnemizi dikey olarak ortalamak içinde bu yöntemi kullanabiliriz. Yapmamız gereken sabit yükseklik değerini bularak margin-top ve top özelliklerini ayarlamak. Şimdi genel divimizi hem dikey hem de yatay olarak ortalamayı görelim.

css ile dikey ve yatay nesne ortalama