CSS’de sorun olan noktalardan biridir dikeyde elemanları ortalamak. Farklı çözüm önerileri sunulmuştur. Bende daha önce yazmıştım bir tane. CSS ile Dikey Ortalama

CSS3 ile birlikte bu soruna bazı çözümler üretildi. Benim burada anlatacağım transform ile üretilen çözüm.

Kod çok basit;

.dikey-ortala {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

Kod bu kadar

Son olarak belirtmem gereken şeyler var.

  • Kapsayıcı elemanın sabit bir yüksekliği olmalıdır.
  • İçeriği yoğun olan sayfalarda transform uygulanan elemanda bulanıklık oluyor. Çözüm için kapsayıcı elemana transform-style: preserve-3d; atamak yeterli oluyor.
  • Dikey ortalama uygulanan elemana tanımlanan üst ve alt padding, margin veya border sıkıntı çıkarıyor.
  • Dinamik CSS yazıyorsanız bunu bir mixin haline getirmek mantıklı

Kalın sağlıcakla.

Tarayıcı Desteği

Chrome explorer Firefox
+ 9+(-ms) +

Mobil Tarayıcılar

Android Mobil Safari Chrome
+ (-webkit) +(-webkit) +

Kaynaklar

Google Chrome Developer Tools ile kullanılmayan CSS kodlarını bulmak

Performans hiç olmadığı kadar önemli bir hale geldi. Google'un arama sonuç sıralamasındaki en büyük etkenlerden birinin site hızı olduğun...… Devamını oku

Web Geliştiriciler İçin Editör Seçimi

13 February 2018 tarihinde yayınlandı.

iOS Simülatör ile Mobil Safari'de Hata Ayıklama

08 February 2018 tarihinde yayınlandı.