CSS’e 2024’te sonunda “dikey ortalama” eklendi

• CSS, sonunda varsayılan yerleşime align-content ekleyerek tek bir CSS özelliği satırıyla dikey hizalamayı mümkün kıldı
  • Desteklenen sürümler: Chrome 123, Firefox 125, Safari 17.4
• Şu ana kadar temel yerleşimde (flow) align-content çalışmadığı için flexbox ya da grid’e geçmek gerekiyordu
  • 2024’te tarayıcılar sonunda Flow yerleşiminde align-content desteğini uyguladı
  • Artık flexbox veya grid olmadan, yalnızca tek bir CSS özelliğiyle hizalama yapılabiliyor
  • Bu yüzden içeriği ayrıca bir div ile sarmaya gerek yok

Dikey hizalamanın tarihi

• Tarayıcılarda dikey hizalama için uzun süre basit bir yöntem yoktu

Yöntem 1: tablo hücresi

• Mantıklılık (Sanity): ★★★☆☆
• flow (varsayılan), table, flexbox, grid olmak üzere 4 ana yerleşim var ve içerik hizalama yerleşime göre değişiyor
• flexbox ve grid daha sonra eklendiği için başlangıçta table kullanılıyordu

<div style="display: table;">  
  <div style="display: table-cell; vertical-align: middle;">  
    Content.  
  </div>  
</div>  

Yöntem 2: absolute konumlandırma

• Mantıklılık: ☆☆☆☆☆
• flow yerleşimi yardımcı olmadığı için absolute konumlandırma ile dolaylı bir çözüm kullanılıyordu

<div style="position: relative;">  
  <div style="position: absolute; top: 50%; transform: translateY(-50%);">  
    Content.  
  </div>  
</div>  

Yöntem 3: satır içi içerik

• Mantıklılık: ☆☆☆☆☆
• flow yerleşimi içerik hizalama konusunda yardımcı değil. Bir satır içindeki dikey hizalamaya izin veriyor
• O halde kapsayıcı yüksekliği kadar bir satır oluşturursak ne olur?

<div class="container">  
  ::before  
  <div class="content">Content.</div>  
</div>  

.container::before {  
  content: '';  
  height: 100%;  
  display: inline-block;  
  vertical-align: middle;  
}  
.content {  
  display: inline-block;  
  vertical-align: middle;  
}  

• İşler kolayca tuhaflaşabiliyor

Yöntem 4: tek satırlı flexbox

• Mantıklılık: ★★★☆☆
• Flexbox, web’in başlamasından 20 yıl sonra yaygın olarak kullanılmaya başladı
• Tek satır modunda (varsayılan), satır dikey alanı doldurur ve align-items ile satır içindeki öğeler hizalanır

<div style="display: flex; align-items: center;">  
  <div>Content.</div>  
</div>  

• Ya da satırları dikey hale getirip öğeleri hizalamak için justify-content kullanabilirsiniz

<div style="display: flex; flex-flow: column; justify-content: center;">  
  <div>Content.</div>  
</div>  

Yöntem 5: çok satırlı flexbox

• Mantıklılık: ★★★☆☆
• Çok satırlı flexbox’ta satırlar align-content ile hizalanabiliyor

<div style="display: flex; flex-flow: row wrap; align-content: center;">  
  <div>Content.</div>  
</div>  

Yöntem 6: grid içeriği

• Mantıklılık: ★★★★☆
• grid daha sonra geldiği için hizalama biraz daha basitleşti

<div style="display: grid; align-content: center;">  
  <div>Content.</div>  
</div>  

Yöntem 7: grid hücresi

• Mantıklılık: ★★★★☆
• align-content hücreleri kapsayıcı içinde hizalar, align-items ise içeriği hücre içinde hizalar

<div style="display: grid; align-items: center;">  
  <div>Content.</div>  
</div>  

Yöntem 8: auto kenar boşluğu

• Mantıklılık: ★★★☆☆
• flow yerleşiminde margin:auto yatayda ortalar ama dikeyde ortalamaz
• flexbox ve grid bu mantıksızlığı paylaşmıyor

<div style="display: grid;">  
  <div style="margin-block: auto;">  
    Content.  
  </div>  
</div>  

Yöntem 9: 2024’te bu yazı

• Mantıklılık: ★★★★★
• Tarayıcıların bunu en başta eklemiş olması gerekirdi

<div style="align-content: center;">  
  <code>align-content</code> just works!  
</div>  

[tobesimple7]

Vay canına~ böyle bir özellik~~

[seunggi]

Bilgisayar biliminin en zor şeyi - ortalama

https://tonsky.me/blog/centering/

[mongsilsushi]

Nihayet!

[sgwanlee]

CSS fazla kolaylaşmadı mı? hahaha

[jwh926]

🙏🏻🙏🏻🙏🏻🙏🏻

[rulerwithcss]

aman Tanrım, peynirli kenar

[shpkc]

Sonunda !

[halfenif]

Geç kaldılar! Geç kaldılar! Geç kaldılar!

[uoayop]

Nihayet

[aer0700]

Mutluyum

[koyokr]

lol

[nemorize]

a-men

[carnoxen]

Mevcut web sitelerinin bu değişiklik nedeniyle yapısının bozulma riski var mı?

[bluekai17]

Ben de bu kısmı merak ediyorum.

[ng0301]

Nihayet!

[yatmak]

Sonunda Web 3.0 çağı geldi.

[plaaat0102]

Yorumlar tam bir neşe kaynağı hahahaha..

[godppun]

Gerçekten sonunda...

[kangkung9225]

Oo...? Yapmak mı gerekiyor haha..

[qurare]

Nihayet

[savvykang]

VAY!!!

[joyfui]

Vay be!!!

[mkyoon]

Çok mutluyum!

[wedding]

Ben daha çok uygulama geliştirme yaptığım için web geliştirmeye yardım ederken hiç düşünmeden aratıp çıkan flexbox'ı kullanıyor, bunun da ortalama olduğunu sanıyordum ama... Meğer bunca zamandır yokmuş, şok oldum.....

[illiil1lii]

Vay be!

[huiya]

Nihayet!

[tjddnjsjo]

Harika!

[pkj3186]

Nihayet!