CSS'de Merkezleme İçin Pratik Bir Kılavuz

CSS matematik işlevlerine girişte kısaca bahsettiğim gibi - faydalı CSS püf noktaları makalesini yayınladıktan sonra - "CSS nasıl ortalanır" gibi anahtar kelimeler için bu siteye gelen trafiği gördüm. Bu yüzden, sonunda böyle bir makaleyi kendim bir araya getirmem mantıklı.

CSS kullanarak nesneleri ortalamakla ilgili sorunun, justify-content: center; Emlak. Daha çok, farklı yerleşim yapılarının kendi kurallarına sahip olması ve belirli bir yaklaşıma uymayabilmesi gerçeğiyle ilgilidir.

Ancak, her şeyden önce, bu kılavuz kimler için oluşturulmuştur:

• CSS'nin "kuralları ve düzenlemeleri" karşısında bunalmış hisseden ön uç geliştiriciler.
• Bu div'i bir kez ve herkes için merkezlemeyi zor bulan herkes. Aaahhhh!!
• Kötü yapılandırılmış şablonlara/temalara takılıp kalmış web sitesi sahipleri.

CSS'de merkezleme genellikle Dikey, Yatay veya Dikey ve Yatay olarak adlandırılır.

Ayrıca Sol, Sağ ve Sol ve Sağ olarak da yorumlayabilirsiniz. Ve bazı durumlarda, bunun Üst ve Alt olarak adlandırıldığını da görebilirsiniz. Bunlar aynı zamanda bu kılavuz boyunca kullandığımız terimler olacaktır. Bununla birlikte, hepsinden en çok aranan yaklaşımla başlayalım.

Satır İçi ve Blok Öğeleri: metin hizalama

İlk bakışta bariz görünmeyen şeylerden biri, text-align: center; sadece paragraflardan daha fazlası için çalışır. Bir özellik olarak, blok olarak kabul edilen herhangi bir öğeye uygulanabilir. Bu, içeriğiniz <div> veya benzer bir öğeye sarıldığı sürece text-align kullanılarak ortalanabileceği anlamına gelir.

CSS ve HTML

 <style> .text-align-container { display: flex; } .text-align-container-style .item { background: #fff2ea; padding: 20px 0; text-align: center; width: 100%; } </style> <div class="text-align-container text-align-container-style"> <div class="item">Hi, I am centered.</div> </div>

Bu yaklaşımın güzel yanı, hem Grid hem de Flexbox için çalışmasıdır. İçeriği div'in içine sardığınız sürece, resimler gibi içerikler için de iyi çalışacaktır.

Ve listelerle de iyi çalışır:

Bir <span> öğesini önce bir blok kapsayıcıya sarmadan ortalamayı denersek ne olacağını görelim.

CSS ve HTML

 .span-demo-container { background: #fff2ea; padding: 20px 0; width: 100%; } .span-demo-center { text-align: center; } <div class="span-demo-container"> <span class="span-demo-center">Am I in the center?</span> </div>

Ve sonuç:

Bu <span> öğesinin ortalanmamasının nedeni, satır içi bir öğe olmasıdır. Satır içi öğeler için her zaman bir ebeveyn ayarlamak istersiniz.

Yani, geri dönüp span-demo-center sınıfını alıp <div> 'e uygularsak sonuç şöyle olacaktır:

Büyük bir kod tabanıyla çalışıyorsanız veya kötü yapılandırılmış bir şablon kullanıyorsanız, bu genellikle merkezlemenin çalışmamasının bir numaralı nedenidir. Bu nedenle, her zaman blok ve satır içi öğeleri kontrol edin ve bunların doğru şekilde iç içe geçip geçmediklerini görün.

Sabit genişliğe sahip merkezleme blok elemanları

Elemanları ortalamak için bir başka popüler yöntem de margin: auto; , en yaygın olarak sabit genişliğe sahip blok elemanları için kullanılır.

Bu nedenle, daha büyük bir kap içinde özel bir div düşünün. Ardından, içeriği bu özel div öğesinin içine yerleştirmeye ve onu ortalamaya çalışıyorsunuz.

Eylemde görmek için canlı bir örnek yapalım:

CSS ve HTML

 .margin-auto-container { background: #fff2ea; padding:1rem; } .margin-auto-inner { width: 200px; padding: 1rem; background: #efba93; color: #fff; margin: 0 auto; text-align: center; } <div class="margin-auto-container"> <div class="margin-auto-inner">Div & Text centered.</div> </div>

Bu örnekte, margin-auto-container sınıfı kapsayıcıyı bu blog gönderisinden alır – ardından margin-auto-inner adlı yeni bir sınıf oluşturur ve buna özel stille sabit bir genişlik uygularız. Son olarak, margin: 0 auto; iç konteynerimizin ana konteynere göre ortada kalacağından emin olmak için.

 neden 0? 0'ı ekliyoruz çünkü Dikey (Üst ve Alt) kenar boşluğunu olduğu gibi bırakmak ve Yatay (Sağ ve Sol) görünüme otomatik kenar boşluğu uygulamak istiyoruz. Bunu, "margin: 25px auto 50px;" gibi tek tek kenar boşluklarını belirtmek için değiştirebilirsiniz. üstte 25 piksel kenar boşluğu ve altta 50 piksel kenar boşluğu bırakacaktır.

Önemli: Marjınızın nedeni: auto; ortalamanın olmaması, ortalamaya çalıştığınız öğeye sabit bir genişlik ayarlamamış olmanızdır.

Ayrıca text-align: center; çünkü bu, metni iç kabın içinde ortalayacaktır.

Sabit genişliğe sahip satır içi öğeleri ortalama

Bir satır içi öğe olması durumunda, özel ayarlı genişlik yok sayılır.

Bir demoya bakalım:

CSS ve HTML

 .margin-auto-container { background: #fff2ea; padding:1rem; } .margin-auto-inner-span { width: 150px; padding: 5px; background: #efba93; color: #fff; margin: 0 auto; text-align: center; } <div class="margin-auto-container"> <span class="margin-auto-inner-span">Inline <span> element with custom width. (Not centered).</span> </div>

Ve sonuç:

Gördüğünüz gibi, margin: auto; yayılma satır içi öğesi ortalanmamıştır.

Neyse ki, bunun için kolay bir düzeltme var. display: block; margin-auto-inner-span sınıfımızın özelliği - tarayıcıya, o belirli öğenin bir blok olarak ele alınmasını istediğimizi söyleyebiliriz. Ve şimdi ortalanmalıdır:

Bu noktada, hangi HTML öğelerinin Blocks ve hangilerinin Inline olarak kabul edildiğini merak ediyor olabilirsiniz. Anlaşılabilir. MDN referansına bakmanızı öneririm:

• Blok düzeyinde öğeler
• Satır içi öğeler

Inline ve Block arasındaki farkı biliyorsanız, probleminize uygun merkezleme çözümünü bulmanız çok daha kolay olacaktır.

Izgara ve Flexbox: Modern Yol

Grid ve Flexbox, modern web tasarımında kullanılan iki yerleşim modülüdür. Flexbox tek boyutlu bir yerleşim sistemi iken, Grid iki boyutlu bir yaklaşıma dayanmaktadır.

Ve her iki düzen için bir div'i ortalamak sadece iki satır kodla yapılabilir.

Dikey ve Yatay: Evrensel Bir Çözüm

Hem Grid hem de Flexbox düzenleri için place-content: center; Emlak.

CSS ve HTML

 .center-div-grid-layout { display: grid; /* display: flex; */ place-content: center; } <div class="center-div-grid-layout">It's that easy.</div>

place-content özelliği, align-content ve justify-content için bir kısayoldur.

place-content , birlikte çalıştığınız bir düzenin stiline bağlı olarak çok sayıda yerleşim varyasyonu yapabilirsiniz:

Tam referans için lütfen bu MDN sayfasına bakın.

Genel olarak, özetlenen merkezleme tekniklerinin yeterli olmayacağı çok az sayıda uç durum vardır. Eski bir düzen ile çalışıyorsanız, en iyi seçeneğiniz, stil sayfasının kendi içindeki sınıf adlarındaki tutarsızlıkları bulmaktır. Ardından, belirtilen merkezleme mantığının düzgün bir şekilde yürütülmesi için öğeleri düzgün bir şekilde yerleştirmenin bir yolunu bulun.

Mutlak Merkezleme: dönüştürme

transform özelliği, bir şeyin "merkezde ölü" - Yatay ve Dikey (Sol, Sağ, Üst, Alt) ortalanmasını istediğinizde kullanılır.

CSS ve HTML

 .transform-example-container { height: 150px; position: relative; background: #fff2ea; } .transform-example-container .transform-absolute { width: 300px; text-align: center; background: #efba93; color: #fff; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); margin: 0; padding: 10px 0; position: absolute; } <div class="transform-example-container"> <p class="transform-absolute">Example: CSS transform</p> </div>

Bu, ortalamak istediğiniz alt öğe için konumu mutlak olarak ayarlayarak çalışır.

Ana öğenin göreli konuma sahip olması önemlidir, aksi takdirde transform özelliği, ana düzeni üst öğesi olarak kullanır.

Konumu sol üst köşeye göre ayarlamak için üst ve sol tuşlarını kullanırız. Bundan sonra, eleman translate() kullanılarak merkeze çekilebilir.

Kenar boşluğu ve dolgu 0'a ayarlanmalıdır, aksi takdirde bir konum kayması yaşarsınız.

Ve bu, öğreticimizi/referansımızı sonuçlandırıyor. CSS ile merkezleme konusunda uzmanlaşmak istiyorsanız, favori kod düzenleyicinizi çalıştırın ve bu örnekleri test etmeye başlayın.