Öğ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

Bu ses hikayenin orijinal dilinde üretilmiştir!

Çok uzun; Okumak

Making security fun one episode at a time

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

Çok uzun; Okumak

Brian Treese

About Author

ETİKETLERİ ASIN

Languages

BU YAZI...

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

Çok uzun; Okumak

Brian Treese

About Author

ETİKETLERİ ASIN

Languages

BU YAZI...

İLGİLİ ÖYKÜLER