Öğeleri Ortalamak için 3 Çağdaş CSS Tekniği

Öğeleri HTML ve CSS ile ortalamak eskiden oldukça zordu. Artık öyle değil. Artık bunu yapmanın birçok farklı yolu var. Bu iyi bir şey çünkü farklı senaryolarda farklı seçeneklere ihtiyaç duyabiliriz. Bu videoda öğeleri ortalamanın en sevdiğim üç yoluna bakacağız. Konumlandırmayı kullanacağız, ardından flexbox'ı kullanacağız ve son olarak CSS ızgarasını kullanacağız.

Tamam, hadi konuya geçelim.

Bu gerçekten o kadar garip bir şey ki, öğeleri Web'deki bir kabın ortasına yerleştirmenin bu kadar uzun süre bu kadar zor olması. Yatay ortalama kolaydı ama dikey ortalama son yıllara kadar neredeyse imkansızdı.

Öğeleri Ortalamak için CSS Konumlandırmayı Kullanma

CSS konumlandırmasını kullanan bu ilk yöntem muhtemelen en uzun süredir var olan yöntemdir, ancak yeni özellikler ortaya çıktıkça biraz gelişmiştir. Bir örneğe bakalım.

Burada kırmızı kenarlı diğer kapta ortalamak istediğimiz bu kutu var. Bu güçlü bir elementtir ve doğrudan burada gördüğümüz kırmızı kutu olan div elementinin içine yerleştirilmiştir.

Bu yöntem için mutlak konumlandırmayı kullanacağız, o yüzden onu strong öğemize ekleyelim.

 strong { position: absolute; }

Şimdi bunun doğru çalışması için div öğemizin konumlandırılacağı bir konumlandırma bağlamı yaratması gerekecek. Bunu yapmanın birçok farklı yolu vardır ancak bu örnek için en iyi seçenek göreceli konumlandırmayı kullanmaktır.

 div { position: relative; }

Artık elementimizi div yüksekliğinin yüzde ellisi ve genişliğinin yüzde ellisinden daha aşağı konumlandırabiliriz. Yukarıdan aşağıya doğru konumlandırmak için yeni mantıksal özelliği olan inset-block-start yüzde elli değerinde kullanabiliriz. Ve soldan yukarıya doğru konumlandırmak için aynı yüzde elli değeriyle inset-inline-start kullanabiliriz.

 strong { ... inset-block-start: 50%; inset-inline-start: 50%; } 

Tamam, yani tam olarak ortalanmış değil, değil mi?

Bunun nedeni, öğeyi div merkezine konumlandırmış olmamızdır, ancak konumu, sol üst köşesine dayalıdır. Şimdi yapmamız gereken, öğeyi yüksekliğinin yüzde ellisi kadar yukarıya ve genişliğinin yüzde ellisinin üzerine geri kaydırmak. Bu onun merkeze doğru şekilde yerleştirilmesini sağlayacaktır. Peki bunu nasıl yapabiliriz?

Aslında çok kolay. Yeni CSS translate özelliğini kullanabiliriz. İlk değer x ekseni boyunca ötelenecektir. Yüzde elli geriye gitmemiz gerekiyor, bu yüzden eksi yüzde elli değerini ekleyeceğiz. Ve ikinci değer y ekseni boyunca çevrilir, ona aynı negatif yüzde elli değerini vereceğiz.

 strong { ... translate: -50% -50%; } 

Ve işte başlıyoruz. Mükemmel merkezli.

Konumlandırma ve çeviriyi kullanan son çalışma örneği:

Yani bunu yapmanın bir yolu bu ama benim favorim değil.

Öğeleri Ortalamak için Flexbox'ı Kullanma

Yapabilirsem, konumlandırma yerine Flexbox'ı kullanmayı tercih ederim çünkü daha kolaydır, daha az kod satırı gerektirir, konumlandırma bağlamı gerektirmez ve dürüst olmak gerekirse, daha iyi, daha modern bir çözüm gibi hissettirir. Bir örneğe bakalım.

Tamam, aynı noktadan başlıyoruz, kırmızı kenarlı dış div'imiz ve ardından iç güçlü elementimiz var.

Div'imizi ekranlı, esnek bir esnek kap haline getirerek başlıyoruz. Daha sonra justify-content özelliği ve center değeri ile öğemizi x ekseni boyunca merkeze hizalayabiliriz. Ve son fakat bir o kadar da önemlisi, align-items özelliği ve aynı center değeri ile y ekseni boyunca hizalama yapabiliriz.

 div { display: flex; justify-content: center; align-items: center; } 

Ve işte karşınızda, öğe düzgün bir şekilde ortalanmış ve bu sefer oraya ulaşmak için yalnızca üç satır kod gerekti.

İşte Flexbox'ı kullanan son çalışma örneği:

Bu harika ve bazen bunu yapmaya ihtiyaç duyuyorum, ancak öğeleri merkeze yerleştirmenin en sevdiğim yolu CSS ızgarasını kullanmaktır. Ve yine, bunun nedenleri, flex olmaktan daha kolay olması ve daha az kod gerektirmesidir.

Öğeleri Ortalamak için Izgarayı Kullanma

Tamam, kırmızı kutu ve iç öğeyle aynı başlangıç noktası.

Bu sefer div'imizi, display değeri grid olan bir ızgara kabı yapacağız. Şimdi burada güzel olan şey, istersek flexbox örneğimizde kullandığımız iki özelliğin aynısını kullanabilmemizdir. justify-content: center ve align-items: center ekleyebiliriz. Tam olarak aynı şekilde çalışır.

 div { display: grid; justify-content: center; align-items: center; }

Biraz komik ama ızgaranın çalışma şekli bu, flexbox ile aynı kutu hizalama özelliklerini kullanabilir. Ama eğer bu şekilde bırakırsak grid kullanmanın gerçekten hiçbir avantajı olmayacak değil mi?

Bunun yerine yapabileceğimiz şey, bu hizalama özelliklerini kaldırmak ve bunları place-item özelliğiyle değiştirmek. Ve bu özelliğe bir merkez değeri verebiliriz.

 div { display: grid; place-items: center; } 

İşte başlıyoruz, şimdi bunu yalnızca iki CSS satırına kadar indirdik.

İşte CSS Izgarasını kullanan son çalışma örneği:

Çözüm

Daha önce de söylediğim gibi eskisinden çok daha kolay, orası kesin. Ancak bu tekniklerin tümü hala çok alakalı ve birçok koşul nedeniyle gerekli olabilir, bu nedenle her ihtimale karşı hepsini bilmek iyidir. Kesinlikle en az miktarda kod CSS ızgarasını tercih ederim ve bu işe yaramazsa bir sonraki en iyi şey flexbox'tır ve bunların hiçbiri işe yaramazsa konumlandırmayı deneyin.