Bir dizi teste tabi tutulurken, değişime en çok direnç gösteren yöntemi bulmak için 5 ortalama tekniğini uygulayın.
CSS'yi merkeze almak, çok kötü bir iştir. Espriler ve alaylarla dolu. 2020 CSS tamamen büyüdü ve artık bu şakalara kahkahalarla gülebiliyoruz. sıkılmış dişler.
Video kullanmayı tercih ederseniz bu gönderinin YouTube versiyonunu kullanabilirsiniz:
Yarışma
Farklı merkezleme türleri vardır. Çeşitli kullanım alanlarından gerekçesini göstermek için "kazandırma" kararının ardındaki gerekçeyi merkezleme tekniğini, The Resilience Ringer'ı oluşturdu. Her merkezde uygulanan bir dizi stres testidir. dengeyi sağlamanız ve onların performanslarını gözlemlemeniz gerekir. Sonunda, en yüksek puanlama tekniğini ve "en değerli" tekniğini açığa çıkarıyorum. Yeni ortalama teknikleri ve çözümlerini öğreneceğinizi umuyoruz.
Direnç Zili
Direnişçi Zili, bir projeyi merkeze almanın strateji uluslararası düzenler, değişken boyutlu görüntü alanları, metin düzenlemeleri ve dinamik içerik. Bu ilkeler, şirket için aşağıdaki dayanıklılık testlerinin şekillendirilmesine merkezleme teknikleri:
- Sıkıştırılmış: ortalama işlevinin genişlik değişikliklerini işleyebilmesi gerekir
- Bastırıldı: merkezleme sayesinde yükseklik değişikliklerini işleyebilecek
- Kopya: ortalamalama, öğe sayısı için dinamik olmalıdır
- Düzenleme: ortalamalama, içeriğin uzunluğu ve diline göre dinamik olmalıdır.
- Akış: ortalamalama doküman yönü, yazma modundan bağımsız olmalıdır
Kazanan çözüm, içeriği kalıcı olarak koruyarak dayanıklılığını göstermelidir. sıkıştırılırken, sıkıştırılırken, çoğaltıldığında, düzenlenirken ve değiştirilirken ortaya dil modlarını ve yol tariflerini kullanın. Güvenilir ve dirençli bir merkez, güvenli bir merkez.
Açıklama
Bazı meta bilgileri saklamanıza yardımcı olacak bazı görsel renk ipuçları sağladım şu bağlamda:
![](https://web.dev/static/articles/centering-in-css/image/4K35cL1tVpEsGqb4FgKp.png?authuser=6&hl=tr)
- Pembe kenarlık, ortalama stillerin sahipliğini gösterir
- Gri kutu, kapsayıcıdaki ortalanmış arka plandır. öğe
- Her çocuğun arka plan rengi beyaz olduğundan bu videoda alt kutu boyutlarına (varsa) göre ortalama
5 Yarışmacı
5 merkezleme tekniği "Resilience Ringer"a girdiğinde, yalnızca biri Dirençli Tacı 👸.
1. İçerik Merkezi
- Squish: Harika!
- Squash: Harika!
- Kopya: Harika!
- Düzenleme: Harika!
- Akış: Harika!
display: grid
metinlerinin kısa ve öz yazımını yakalamak zor olacak.
place-content
kısaltmasıdır. Çocukları ortak bir paydada buluşturup meşrulaştırdığı için
okunması gereken öğe grupları için sağlam bir ortalama tekniğidir.
.content-center {
display: grid;
place-content: center;
gap: 1ch;
}
- İçerik, kısıtlı alan ve taşma durumunda bile ortalanır
- Merkezleme düzenlemeleri ve bakım işlemleri tek bir yerde
- Boşluk, n alt öğe arasında eşit boşluğu garanti eder
- Izgara varsayılan olarak satır oluşturur
- En geniş alt öğe (
max-content
), diğer tüm öğeler için genişliği ayarlar. Bu, bu konuyu Gentle Flex'te daha fazla ele alacağız.
Paragraflar ve başlıklar, prototipler veya merkezi bir yerde ayarlanması gereken şeylerdir.
2. Yumuşak Esnek
- Squish: Harika!
- Squash: Harika!
- Kopya: Harika!
- Düzenleme: Harika!
- Akış: Harika!
Gentle Flex, yalnızca merkeze odaklanan daha gerçekçi bir stratejidir. Yumuşak ve yumuşak çünkü
çocuk paketinin boyutları, place-content: center
'ın aksine
ortalama. Tüm öğeler mümkün olduğunca nazik bir şekilde üst üste dizilir, ortalanır ve yerleştirilir.
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
- Yalnızca hizalama, yön ve dağıtımı yönetir
- Düzenlemeler ve bakımlar tek bir yerde
- Boşluk, n alt öğe arasında eşit boşluğu garanti eder
- Çoğu kod satırı
Hem makro hem de mikro düzenler için idealdir.
3. Otomatik bot
- Squish: harika
- Squash: harika
- Kopyala: iyi
- Düzenleme: harika
- Akış: harika
Kapsayıcı, hizalama stili olmadan esnek olacak şekilde ayarlanırken doğrudan alt öğeler
otomatik kenar boşluklarıyla stilize edilir. Hem nostaljik hem de muhteşem bir şeyler
margin: auto
, öğenin tüm taraflarında çalışır.
.autobot {
display: flex;
}
.autobot > * {
margin: auto;
}
- Eğlenceli püf noktaları
- Hızlı ve kirli
- Taşırken garip sonuçlar
- Boşluk yerine dağıtıma dayalı tercih, düzenlerin çocuklarla birlikte bulunabileceği anlamına gelir. dokunulan taraf
- "İddiada bulunmak" gözüküyor ve bu durum, değişikliğin çocuğun kutu boyutuna
Simgeleri veya sözde öğeleri ortalamak için iyidir.
4. Fluffy Merkezi
- Squish: kötü
- Squash: kötü
- Yinelenen: kötü
- Düzenleme: Harika!
- Akış: Harika! (mantıksal özellikleri kullandığınız sürece)
Yarışmacı "tüylü orta" açık arayla kulağa en lezzetli rakip geliyor; kullanılan bir merkezleme tekniğidir. İçinizdeki pembeyi görün kenarlık!?
.fluffy-center {
padding: 10ch;
}
- İçeriği korur
- Atomik
- Her test gizli bir şekilde bu ortalama stratejisini içerir
- Kelime boşluğu boşluktur
- Faydalı olma hissi
- Doğal olarak her biri aynı olduğundan, kapsayıcı ile öğeler arasında bir çakışma olur. bedenleri konusunda çok titiz davranmak
Kelime veya kelime öbeği odaklı ortalamanın yanı sıra etiketler, haplar, düğmeler, çipler ve daha fazla.
5. Pop ve Plop
- Squish: tamam
- Squash: tamam
- Yinelenen: kötü
- Düzenleme: iyi
- Akış: İyi
"Çarpıcı" çünkü mutlak konumlandırma, öğeyi normalin dışına çıkardığı için akışı sağlar. "Lop" Adların bir bölümünün en faydalı olduğu zamanlardan biri olduğu için: onun üzerine tırmanmak. Bu özellik, klasik ve kullanışlı bir bindirme ortalama dinamik, esnek ve dinamik bir tekniktir. Bazen projenizin plop kullanıcı arayüzü üzerinden açılıyor.
- Yararlı
- Güvenilir
- İhtiyaç duyduğunuzda paha biçilmez bir şeydir
- Negatif yüzde değerlerine sahip kod
- Kapsayıcı bloğunu zorunlu kılmak için
position: relative
gerekir - Erken ve tuhaf çizgi sonları
- Ek çaba gerektirmeden, içeren blok başına yalnızca 1 olabilir
Kalıcı, kısa mesaj ve mesajlar, yığınlar ve derinlik efektleri, pop-up'lar için ideal.
Kazanan
Bir adada olsaydım ve tek bir merkezleme tekniğinden yararlanabiliyor olsaydım...
[davul çalma]
Yumuşak ve Esnek 🎉
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
Bu kimliği stil sayfalarımda bulabilirsiniz, çünkü hem makro hem de mikro düzenler. sonuçlarıma uyan, her yönüyle güvenilir bir çözüm emin olmanız gerekir. Ayrıca doğuştan gelen bir beden tutkunu olduğum için bu çözüme geri dönüyor. Doğru, çok şey yazın ama sağladığı faydalar koddan daha ağır basar.
En Değerli Oyuncu
Fluffy Merkez
.fluffy-center {
padding: 2ch;
}
Fluffy Center, bir ortalama tekniği olarak göz ardı edilebilecek kadar küçüktür. ama bu, ortalama stratejilerimin en önemli parçalarından biri. O kadar atomik ki bazen kullandığımı unutacağım.
Sonuç
Merkezleme stratejilerinizi ne tür durumlar bozar? Diğer zorluklar ne kadar kullanıldı? Ben çeviriyi ve otomatik yükseklik anahtarı... Başka ne olabilir?
Şimdi bunu nasıl yaptığımı biliyorsun, şimdi nasıl yaparsın? Yaklaşımlarımızı çeşitlendirelim bilgi edinecek ve web'de uygulama geliştirmenin tüm yollarını öğreneceğiz. Aşağıdaki işlemler için codelab'i bu gönderiyle birlikte uygulayın: kendi ortalama örneğinizi oluşturun. Tweet gönder bana söylersiniz. Sonra, bunu Topluluk remiksleri bölümünü inceleyin.
Topluluk remiksleri
- Bir blog yayını ile CSS'deki İpuçları