“Yazılarınızı yatay olarak ortalamanın kusurlusu kusursuzu olmaz, zaten yıllardır ortalıyoruz gayet güzelce.” dediğinizi duyar gibiyim. Evet haklısınız da. Yatay olarak ortalama zaten hep kolaydı. Peki ya yazılarınızı değişken yükseliğe sahip alanlarda dikey olarak ortalamadan ne haber? Bu durum karşınıza her çıktığında eminim ki problem olmuştur. Bu makaleyle beraber yazılarınızı dikey olarak Flexbox ile ortalamanın ne kadar kolay olduğunu göstereceğim.
Eski Usul Ortalama
Flexbox ile ortalamaya geçmeden önce daha evvel bunu nasıl yaptığımı anlatmak istiyorum. Bir resim düşünün ve bu resmin üzerinde 3 satır slogan veya yazı düşünün. Düşünmeyelim hazırlayalım hatta.
Öncelikle şu şekilde bir HTML bloğumuz olsun:
|
1 2 3 4 5 6 7 |
<div class="slogan"> <div class="slogan-yazisi"> <h1>Flexbox Sloganımız</h1> <h3>Tamamen Ortalanmış</h3> <h6>Kaç satır olduğunun önemi olmaksızın ortalanmış hemde.</h6> </div> </div> |
Şimdi bir de başlangıç CSS’imiz olsun. Yani basit bir tasarımımız olsun. Fakat herhangi bir ortalama, kaydırma vs. olmadan:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
html, body{ margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; } h1{ font-size: 60px; } h3{ font-size: 32px; font-weight: normal; text-transform: uppercase; letter-spacing: 4px; } h6{ font-size: 22px; } .slogan h1, .slogan h3, .slogan h6{ margin: 0; text-shadow: 2px 2px 6px #000; } .slogan{ color: white; background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/409269/banner-flowers.jpg') top left/cover no-repeat; height: 300px; } |
Bu çalışmanın canlı önizlemesini buraya tıklayarak görüntüleyebilirsiniz. Ekran çıktınız şu şekilde olacaktır:
Öncelikle yazımızı yatay olarak ortalayalım:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
html, body{ margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; } h1{ font-size: 60px; } h3{ font-size: 32px; font-weight: normal; text-transform: uppercase; letter-spacing: 4px; } h6{ font-size: 22px; } .slogan h1, .slogan h3, .slogan h6{ margin: 0; text-shadow: 2px 2px 6px #000; text-align: center; } .slogan{ color: white; background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/409269/banner-flowers.jpg') top left/cover no-repeat; height: 300px; } |
Bu işin kolay kısmıydı. text-align: center; ile anında yazımızı ortaladık. Dikey olarak ortalamaya gelince eğer yazımız tek satır olsaydı line-height: 300px; yaparak içinde bulunduğu divin yüksekliğinde line-height tanımlayarak yazımızı dikey olarak ortalayabilirdik. Peki bu şekilde 3 başlık etiketi varsa şayet içinde paragraf varsa ne yapıyoruz? Tabii ki slogan-yazisi alanına padding-top ekliyoruz ve görsel olarak okey verdiğimiz değeri yazıyoruz. Yani CSS’imiz şu şekilde olacak:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
html, body{ margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; } h1{ font-size: 60px; } h3{ font-size: 32px; font-weight: normal; text-transform: uppercase; letter-spacing: 4px; } h6{ font-size: 22px; } .slogan h1, .slogan h3, .slogan h6{ margin: 0; text-shadow: 2px 2px 6px #000; text-align: center; } .slogan{ color: white; background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/409269/banner-flowers.jpg') top left/cover no-repeat; height: 300px; } .slogan-yazisi{ padding-top: 60px; } |
Codepen’de canlı olarak görüntülemek için buraya tıklayınız. Ekran görüntüsü şu şekilde olacaktır:
Yeni Usul Ortalamak İsteseydik Flexbox ile Nasıl Yapacaktık?
HTML bloğumuz aynen kalmak üzere Flexbox ile ortalama yapmak için öncelikle .slogan elementine display: flex; ekleyeceğiz. Ve daha sonra justify-content ve align-items kullanarak yatay ve dikey olarak ortalamış olacağız.
Justify-content:center ile yazımızı yatayda ortalarken align-items: center ile yazımızı dikeyde ortalıyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
html, body{ margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; } h1{ font-size: 60px; } h3{ font-size: 32px; font-weight: normal; text-transform: uppercase; letter-spacing: 4px; } h6{ font-size: 22px; } .slogan h1, .slogan h3, .slogan h6{ margin: 0; text-shadow: 2px 2px 6px #000; text-align: center; } .slogan{ color: white; background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/409269/banner-flowers.jpg') top left/cover no-repeat; height: 300px; display: flex; justify-content: center; align-items: center; } |
Codepen’de bu çalışmayı görüntülemek için buraya tıklayınız. Ekran çıktısı aşağıdaki gibi olacaktır:
Flexbox yeni teknoloji olmakla beraber eski tarayıcılarda desteklenmemektedir. Flexbox destekleyen tarayıcıları görmek için buraya tıklayınız. Daha derin bilgi için Fatih abinin hazırladığı kaynağı inceleyebilirsiniz.
Faydalı olması dileğiyle, kolay gelsin
Yorumlar