CSS ile Dikey Ortalama için 4 Yöntem

Emre Aydın

16 Ocak 2017

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.

align-items
vertical-align
transform
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.

See the Pen <a href="http://codepen.io/emreaydin/pen/wgzEYd/">align-items örnekleri</a> by Emre Aydın (<a href="http://codepen.io/emreaydin">@emreaydin</a>) on <a href="http://codepen.io">CodePen</a>.

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.

See the Pen <a href="http://codepen.io/emreaydin/pen/wgzYGp/">align-items vertical center</a> by Emre Aydın (<a href="http://codepen.io/emreaydin">@emreaydin</a>) on <a href="http://codepen.io">CodePen</a>.

`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.

See the Pen <a href="http://codepen.io/emreaydin/pen/XpjxwX/">vertical-align: middle</a> by Emre Aydın (<a href="http://codepen.io/emreaydin">@emreaydin</a>) on <a href="http://codepen.io">CodePen</a>.

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;

See the Pen <a href="http://codepen.io/emreaydin/pen/XpjyYg/">align-items vertical center transform</a> by Emre Aydın (<a href="http://codepen.io/emreaydin">@emreaydin</a>) on <a href="http://codepen.io">CodePen</a>.

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;

See the Pen <a href="http://codepen.io/emreaydin/pen/dNpwKb/">align-items vertical center transform simple</a> by Emre Aydın (<a href="http://codepen.io/emreaydin">@emreaydin</a>) on <a href="http://codepen.io">CodePen</a>.

`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.

See the Pen <a href="http://codepen.io/emreaydin/pen/xgEyJV/">menu line-height vertical center</a> by Emre Aydın (<a href="http://codepen.io/emreaydin">@emreaydin</a>) on <a href="http://codepen.io">CodePen</a>.

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.