#

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ğer Açıklama
stretch Varsayı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
initial Varsayı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ğer Açı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
length Elementi verilen değerlere göre kaldırır veya indirir. Negatif değerleri tanır
% line-height benzeri yüzde ile hizalama yapar
sub Elementi ebeveyn elemente alt simge gibi konumlandırır
super Elementi ebeveyn elemente üst simge gibi konumlandırır
text-top Elementin tepesiyle ebeveyn elementin tepesini hizalar
middle Elementi ebeveyn elementin ortasına hizalar
bottom Elementi ebeveyn elementin altına hizalar
text-bottom Elementin 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

Etiketler

Paylaş

Yorumlar