#

CSS ile Dikey Ortalama için 4 Yöntem

CSS’de en sorunlu alanlardan biridir dikey ortalama. Yıllar geçtikce, CSS geliştikçe farklı yöntemler öne sürüldü. Bu yöntemleri tek tek inceleyeceğiz. Dikey ortalaya en çok ihtiyaç duyduğum yerler resim üzerindeki yazılar. Yazının tek satırla sınırlanacağı alanlarda pek ihtiyaç duymasakta (padding, margin kullanarak yapılan ortalama) yazının satır sayısı artınca dikey ortalamada hayati bir önem taşıyor.

Dikey ortalama yapmak için sizlere 4 ayrı yöntem önereceğim. Farklı amaçlar, farklı işler için farklı ortalama yöntemlerine ihtiyaç duyulabiliyoruz. 4 yöntemide incelemekte fayda var.

  1. align-items
  2. vertical-align
  3. transform
  4. line-height

align-items

align-items kutu içerisindeki öğelerin dikeyde nasıl sıralanacağını belirler. align-items‘ın aldığı 5 değer aşağıdaki gibidir;

DeğerAçıklama
stretchVarsayılan değer, öğeleri kutunun içine tam sığacağı şekilde esnetir
centerÖğeleri kutunun içine dikey konumlandırır
flex-startÖğeleri kutunun başına konumlandırır
flex-endÖğeleri kutunun sonuna konumlandırır
baselineÖğelerin içindeki yazı tipi referans alınarak konumlandırır
initialVarsayılan değere ayarlar

Bizim dikey ortalama için kullacağımız align-items:center değeri. Tüm değerleri görmek için buraya tıklayıp codepen kaynağına gidin.

Yukarıda ki örnekte gördüğünüz gibi kutuların dikey ortalaması kolayca yaptık. Şimdi align-items kodumuzu resim üzerinde kullanalım.

display:flex kodunu ebeveyn katmana yazıyoruz. Tanımlanan ebeveyn kutuyu esnek hale getirecek.

vertical-align

vertical-align css’de dikey ortalama yapmak için kullanılan en yaygın yöntemlerden biri.

vertical-align kullanmak için üst-kapsayıcı kutuya (#container) display:table değeri verilir. Ortalama yapmak istediğiniz kutuya ise vertical-align: middle; ve display: table-cell; değeri girilir.

vertical-align‘in alacağı değerler aşağıdaki gibidir, biz middle değerini kullandık;

DeğerAçıklama
baselineÇerçevenin taban çizgisi ile ebeveyn çerçevenin taban çizgisi hizalanır. Eğer çerçevelerin taban çizgileri yoksa çerçevelerin alt sınırları hizalanır
lengthElementi verilen değerlere göre kaldırır veya indirir. Negatif değerleri tanır
%line-height benzeri yüzde ile hizalama yapar
subElementi ebeveyn elemente alt simge gibi konumlandırır
superElementi ebeveyn elemente üst simge gibi konumlandırır
text-topElementin tepesiyle ebeveyn elementin tepesini hizalar
middleElementi ebeveyn elementin ortasına hizalar
bottomElementi ebeveyn elementin altına hizalar
text-bottomElementin tepesiyle ebeveyn elementin altına hizalar
topÇerçevenin tepesi ile satır çerçevesinin tepesi hizalanır.

transform

Benim en sevdiğim yöntemdir. Bu yöntemde ebeveyn katmana transform-style: preserve-3d; değerini veriyoruz. Yani katmanı 3d olarak tanımlıyoruz. Ortalamak istediğimiz katmana ise position: relative; , top: 50%;transform: perspective(1px) translateY(-50%); değerlerini veriyoruz.

Aşağıda ki örnekten inceleyebilirsiniz;

veya çok daha basit olarak ortalamak position: relative , top: 50% , transform: translateY(-50%) değerlerini vererek istediğiniz katmanı ortalayabilirsiniz. Aşağıda örneği bulunuyor;

line-height

line-height, daha çok menü elemanlarını dikeyde ortalamak için kullanılan bir yöntem. Tabii diğer kullanım türleri ile tek satır olmak şartıyla işe yarayacaktır ama önerdiğim kullanım alanı menüler.

Mantığını anlatmak gerekirse, menünün yüksekliği kadar line-height vererek satırın yüksekliğini menü yüksekliği kadar alacak ve yazı karakterini menünün yüksekliğinin(bağlı olarak satır yüksekliği) dikeyde ortasına yerleştirecek. Örnek kullanım aşağıdaki gibidir.

line-height ile yapılan ortalamalarda yazı karakterine bağlı olarak bazen üstten veya alttan 1px fazlalıklar olabiliyor. Ortalamayı engelleyen tekil sayılı font boyutlarından kaynaklanıyor. Bunun çözümü menüyü 1px büyütmek veya 1px küçültmek olabilir. Görsel açıdan bozukluk teşkil etmiyorsa olduğu gibi kullanabilirsiniz.

Özellik
Chrome
Firefox
İnternet Explorer
Safari
Opera
vertical-align
1.0
1.0
4.0
1.0
4.0
Özellik
Chrome
Firefox
İnternet Explorer
Safari
Opera
transform
36.0
12.0 -webkit-
10.0
12.0
9.0
4.0 -webkit-
23.0
15.0 -webkit-
Özellik
Chrome
Firefox
İnternet Explorer
Safari
Opera
align-items
21.0
20.0
11.0
9.0
7.0 -webkit-
12.1
Özellik
Chrome
Firefox
İnternet Explorer
Safari
Opera
text-overflow
1.0
1.0
4.0
1.0
7.0

Tags

Share

Comments

Yardıma mı ihtiyacınız var?
WhatsApp üzerinden mesaj gönder