Öğeleri   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. HTML ve CSS  Tamam, hadi konuya geçelim.   https://youtu.be/XMH4c1xIZtE?embedable=true  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   elementinin içine yerleştirilmiştir.  div  Bu yöntem için mutlak konumlandırmayı kullanacağız, o yüzden onu   öğemize ekleyelim. strong   strong { position: absolute; }  Şimdi bunun doğru çalışması için   öğ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   div { position: relative; }  Artık elementimizi   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   yüzde elli değerinde kullanabiliriz. Ve soldan yukarıya doğru konumlandırmak için aynı yüzde elli değeriyle   kullanabiliriz. div inset-block-start inset-inline-start     strong { ... inset-block-start: 50%; inset-inline-start: 50%; }  Tamam, yani tam olarak ortalanmış değil, değil mi?  Bunun nedeni, öğeyi   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? div  Aslında çok kolay. Yeni CSS   ö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. translate     strong { ... translate: -50% -50%; }  Ve işte başlıyoruz. Mükemmel merkezli.  Konumlandırma ve çeviriyi kullanan son çalışma örneği:   https://codepen.io/brianmtreese/pen/PoLYmKW?embedable=true  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   özelliği ve center değeri ile öğemizi x ekseni boyunca merkeze hizalayabiliriz. Ve son fakat bir o kadar da önemlisi,   özelliği ve aynı center değeri ile y ekseni boyunca hizalama yapabiliriz. justify-content align-items     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:   https://codepen.io/brianmtreese/pen/bGZbWgW?embedable=true  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,   olmaktan daha kolay olması ve daha az kod gerektirmesidir. flex  Öğeleri Ortalamak için Izgarayı Kullanma  Tamam, kırmızı kutu ve iç öğeyle aynı başlangıç noktası.   Bu sefer div'imizi,   değeri   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.   ve   ekleyebiliriz. Tam olarak aynı şekilde çalışır. display grid justify-content: center align-items: center   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:   https://codepen.io/brianmtreese/pen/zYbOwoM?embedable=true  Çö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.    da yayınlandı. Burada

Buy Me a Coffee

Bu ses hikayenin orijinal dilinde üretilmiştir!

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

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

Kullanıcı Odaklı Kripto Ürünleri Oluşturma: Müşteri Geri Bildiriminin Önemi

Telegram: Kripto Adası'nın anakaraya olan köprüsü

HackerNoon Yazma Yarışmasını mı Kazanmak İstiyorsunuz? İşte #crypto-api Yarışması Kazananlarının Önerileri

Başarılı Buluta Geçiş İçin Tam Kılavuz: Stratejiler ve En İyi Uygulamalar

Kullanıcı Odaklı Kripto Ürünleri Oluşturma: Müşteri Geri Bildiriminin Önemi

Telegram: Kripto Adası'nın anakaraya olan köprüsü

HackerNoon Yazma Yarışmasını mı Kazanmak İstiyorsunuz? İşte #crypto-api Yarışması Kazananlarının Önerileri

Başarılı Buluta Geçiş İçin Tam Kılavuz: Stratejiler ve En İyi Uygulamalar

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps