
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
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:
değerlerini vererek istediğiniz katmanı ortalayabilirsiniz. Aşağıda örneği bulunuyor;
translateY(-50%)
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 | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
vertical-align |
Özellik | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
transform | 12.0 -webkit- | 4.0 -webkit- | 15.0 -webkit- |
Özellik | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
align-items | 7.0 -webkit- |
Özellik | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
text-overflow |
Elif
5 sene önceNihayet cozdum bu dikey hizalama olayini. Sayenizde.. Tesekkurler
NoProblemos
4 sene önceSayenizde projem için yapacağım sitemde tuzunuz oldu.Teşekkürler