Merkez bloğu css. CSS'de öğelerin yatay ve dikey hizalanması
Web tasarımcıları işte her gün DIV'leri kullanır. Abartmadan, bu en popüler etikettir. Herhangi bir sitenin kaynağını açın ve nesnelerin üçte ikisinin olmasa da çoğunun içine alındığını göreceksiniz.
DIV nedir?
Öğenin adı, bölme anlamına gelen İngilizce bölme kelimesinden gelir. İşaretleme yazarken, öğeleri bloklara ayırmak için kullanılır. DIV'ler, bir web sayfasındaki içerik gruplarını içine alır. Örneğin resimler, metin içeren paragraflar. Etiket, içeriğin görüntülenmesini hiçbir şekilde etkilemez ve herhangi bir anlamsal yük taşımaz.
DIV, tüm genel öznitelikleri destekler. Ancak web tasarımı için yalnızca ikisine ihtiyacınız vardır - bir sınıf ve bir kimlik. Geri kalan her şeyi yalnızca egzotik durumlarda hatırlayacaksınız ve bu bir gerçek değil. Eskiden bir div'i ortalamak veya sola hizalamak için kullanılan align özelliği kullanımdan kaldırılmıştır.
DIV'ler ne zaman kullanılır?
Sitenin bir buzdolabı olduğunu ve DIV'lerin içeriği sıralamanız gereken plastik kaplar olduğunu hayal edin. Ciğer sucuğu ile meyveyi aynı kaba koymazsınız. Koyduğunuz her çeşit ürün ayrı ayrı. Web içeriği de benzer şekilde oluşturulur.
Herhangi bir siteyi açın ve anlamsal bloklara bölün. Başlık üstte, alt bilgi altta, ana metin ortada. Yan tarafta, genellikle tanıtım içeriği veya etiket bulutu içeren daha küçük bir sütun bulunur.
Şimdi her bölümü daha ayrıntılı olarak sökün. Başlık ile başlayın. Site başlığında ayrı bir logo, gezinme, birinci düzey başlık ve bazen bir slogan bulunur. Her semantik bloğa bir kapsayıcı atayın. Bu, yalnızca akıştaki öğeleri ayırmakla kalmayacak, aynı zamanda biçimlendirmeyi de kolaylaştıracaktır. Nesneye bir sınıf veya kimlik vererek DIV etiketinde ortalamanız çok daha kolay olacaktır.
DIV'yi Kenar Boşluklarıyla Ortaya Hizala
Web öğelerini işlerken, tarayıcı üç özelliği dikkate alır: dolgu, kenar boşluğu ve kenarlık. dolgu, içerik ile kenarlığı arasındaki boşluktur. Kenar boşluğu - bir nesneyi diğerinden ayıran alanlar. Sınır, bloklar boyunca uzanan çizgilerdir. Hepsinden veya yalnızca bir taraftan aynı anda atanabilirler:
div( kenarlık: 1px katı #333; sol kenarlık: yok; )Bu özellikler, nesneler arasına boş alan ekler ve ayrıca bunların istendiği gibi hizalanıp yerleştirilmesine yardımcı olur. Örneğin, görüntü bloğunun sol kenardan merkeze %20 kaydırılması gerekiyorsa, öğeye %20 değerinde sol kenar boşluğu atarsınız:
Resimli blok( sol kenar boşluğu: %20; )
Öğeler, genişlik değerleri ve negatif dolgu kullanılarak da biçimlendirilebilir. Örneğin, 200px'e 200px boyutlarında bir blok var. İlk olarak, ona mutlak bir konum atayın ve %50 merkeze taşıyın.
Div( konum: mutlak; sol: %50; )
Şimdi, DIV'nin mükemmel bir şekilde ortalandığından emin olmak için, ona genişliğinin %50'sine eşit, yani -100 piksele eşit bir negatif sol dolgu verin:
sol kenar boşluğu: -100px
CSS'de buna "hava giderme" denir. Ancak, çeşitli iç içe geçme seviyelerine sahip elemanlar için yapılması oldukça zor olan sürekli hesaplamalar yapma ihtiyacında önemli bir dezavantajı vardır. Dolgu ve kenarlık genişliği ayarlanırsa, tarayıcı varsayılan olarak kabın boyutlarını kenarlık kalınlığı, sağdaki, soldaki dolgu ve içerideki içeriğin toplamı olarak hesaplayacaktır, bu da sürpriz olabilir. .
Bu nedenle, bir DIV'yi ortalamanız gerektiğinde, border-box değeriyle box-sizing özelliğini kullanın. Tarayıcının, DIV öğesinin toplam genişliğine dolgu ve kenarlık değeri eklemesini engeller. Bir öğeyi yükseltmek veya alçaltmak için negatif değerler de kullanın. Ancak bu durumda, kabın üst veya alt alanına atanabilirler.
Otomatik kenar boşluklarını kullanarak div bloğu nasıl ortalanır
Bu, büyük blokları ortalamanın kolay bir yoludur. Konteynerin genişliğini ve marj özelliğini otomatik olarak ayarlamanız yeterlidir. Tarayıcı bloğu ortaya, solda ve sağda aynı kenar boşlukları olacak şekilde yerleştirecek ve tüm işi kendi başına yapacaktır. Sonuç olarak, matematiksel hesaplamalarda kafanızın karışması riskini almaz ve zamandan önemli ölçüde tasarruf edersiniz.
Duyarlı uygulamalar geliştirirken otomatik kenar boşluğu yöntemini kullanın. Anahtar, kaba ems veya yüzde cinsinden bir genişlik değeri vermektir. Yukarıdaki kod DIV'yi ortalayacak ve cep telefonları da dahil olmak üzere herhangi bir cihazda ekranın %90'ını kaplayacaktır.
Özellik ekranı üzerinden hizalama: satır içi blok
Varsayılan olarak, DIV öğeleri blok öğeleri olarak kabul edilir ve blok görüntü değerine sahiptir. Bu yöntem için, bu özelliği geçersiz kılmanız gerekecek. Yalnızca ana kapsayıcısı olan DIV'ler için uygundur:
outer-div sınıfına sahip bir öğeye, içindeki metni ortalayan center değerine sahip bir text-align özelliği atanır. Ancak şimdilik, tarayıcı iç içe geçmiş DIV'yi bir blok nesnesi olarak görüyor. text-align özelliğinin çalışması için inner-div satır içi olarak ele alınmalıdır. Böylece, iç div seçici için CSS'de aşağıdaki kodu yazarsınız:
İç div( ekran: satır içi blok; )
Display özelliğini bloktan satır içi bloğa değiştirirsiniz.
dönüştürme/çeviri yöntemi
Basamaklı Stil Sayfaları, web öğelerini istediğiniz zaman taşımanıza, eğmenize, döndürmenize ve dönüştürmenize olanak tanır. Bunun için transform özelliği kullanılır. İstenilen dönüşüm türü ve derecesi değer olarak belirtilir. Bu örnekte çeviri ile çalışacağız:
dönüştür: tercüme et(%50, %50);Translate işlevi, bir öğeyi geçerli konumundan sola/sağa ve yukarı/aşağı taşır. Parantez içinde iki değer iletilir:
- yatay hareket derecesi;
- dikey hareket derecesi.
Elemanın yalnızca koordinat eksenlerinden biri boyunca taşınması gerekiyorsa, çeviri sözcüğünden sonra eksenin adını ve parantez içinde gerekli kaydırma miktarını belirtirsiniz:
Dönüştür: öteleY(-20%);
Bazı kılavuzlarda, satıcı önekleriyle dönüşümü görebilirsiniz:
webkit-dönüşüm: çeviri(%50, %50); -ms-transform: çeviri(%50, %50); dönüştür: tercüme et(%50, %50);
2018'de bu artık gerekli değil, özellik Edge ve IE dahil tüm tarayıcılar tarafından destekleniyor.
İhtiyacımız olan DIV'yi ortalamak için translate CSS fonksiyonu dikey ve yatay eksenler için %50 değeri ile yazılır. Bu, tarayıcının öğeyi mevcut konumundan genişliğinin ve yüksekliğinin yarısına taşımasına neden olur. Genişlik ve yükseklik özellikleri belirtilmelidir:
transform özelliğinin uygulandığı öğenin, etrafındaki nesnelerden bağımsız olarak hareket ettiğini unutmayın. Bir yandan, bu uygundur, ancak bazen hareket eden DIV, başka bir kapsayıcının üzerine binebilir. Bu nedenle, ağ bileşenlerini merkezleme yöntemi standart dışı kabul edilir ve yalnızca çok gerekli durumlarda kullanılır. Animasyon için tüm CSS kanonlarına göre dönüşümler kullanılır.
Flexbox düzeniyle çalışma
Flexbox, web düzenlerini düzenlemenin karmaşık bir yolu olarak kabul edilir. Ama ustalaşırsanız standart formatlama yöntemlerinden çok daha basit ve zevkli olduğunu anlayacaksınız. Flexbox özelliği, öğeleri işlemek için esnek ve inanılmaz derecede güçlü bir yoldur. Modülün adı İngilizce'den "esnek kapsayıcı" olarak çevrilmiştir. Genişlik, yükseklik, öğelerin düzeni değerleri, girintiler ve kenar boşlukları hesaplanmadan otomatik olarak ayarlanır.
Önceki örneklerde, display özelliğiyle zaten çalıştık, ancak bunu blok (blok) ve satır içi (satır içi blok) değerlere ayarladık. Esnek düzenler oluşturmak için display: flex kullanacağız. İlk önce esnek bir kaba ihtiyacımız var:
Basamaklı tablolarda onu esnek bir kapsayıcıya dönüştürmek için şunu yazarız:
Flex-container( ekran: flex; )
İçinde yuvalanmış tüm nesneler, ancak yalnızca doğrudan alt öğeler, esnek öğeler olacaktır:
Bir esnek kapsayıcı içine bir liste yerleştirilirse, li listesindeki öğeler esnek öğeler olarak kabul edilmez. Flexbox düzeni yalnızca ul üzerinde çalışır:
Esnek öğeleri yerleştirme kuralları
Esnek öğeleri yönetmek için, içeriği yasla ve hizala öğelerine ihtiyacınız var. Belirttiğiniz değerlere bağlı olarak bu iki özellik, nesneleri gerektiği gibi otomatik olarak konumlandırır. Tüm iç içe geçmiş DIV'leri ortalamamız gerekirse, justify-content: center, align-items: center yazıyoruz ve başka bir şey yazmıyoruz. Tarayıcı işin geri kalanını yapacak:
Metni esnek öğeler olan DIV'lerde ortalamak için standart metin hizalama hilesini kullanabilirsiniz. Ya da iç içe geçmiş her bir DIV'yi esnek bir kapsayıcı yapabilir ve içeriği justify-content ile yönetebilirsiniz. Bu yöntem, grafikler, çok düzeyli listeler dahil diğer iç içe geçmiş nesneler dahil olmak üzere çeşitli içerikler içeriyorsa çok daha rasyoneldir.
Bir nesneyi CSS ile dikey olarak ortalamanın temelde farklı birkaç yolu vardır, ancak doğru olanı seçmek zor olabilir. Bazılarına bakacağız ve ayrıca edinilen bilgileri kullanarak küçük bir web sitesi yapacağız.
CSS ile dikey merkez hizalaması elde etmek o kadar kolay değildir. Birçok yol vardır ve hepsi tüm tarayıcılarda çalışmaz. 5 farklı yönteme ve her birinin artılarına ve eksilerine bir göz atalım. Örnek.
1. yol
Bu yöntem, bazı öğeleri ayarladığımızı varsayar.
profesyoneller
- İçerik, yüksekliği dinamik olarak değiştirebilir (yükseklik, CSS'de tanımlanmamıştır).
- Yeterli alan yoksa içerik kesilmez.
eksiler
- IE 7 ve altında çalışmıyor
- Çok sayıda iç içe etiket
2. yöntem
Bu yöntem, üst kısmı %50'ye ayarlanmış ve üst kenar boşluğu (kenar boşluğu) eksi içeriğin yüksekliğinin yarısı olan div'in mutlak konumlandırmasını kullanır. Bu, nesnenin CSS stillerinde tanımlanan sabit bir yüksekliğe sahip olması gerektiği anlamına gelir.
Yükseklik sabit olduğu için overflow:auto; içeriği içeren div için, yani içerik sığmazsa kaydırma çubukları görünecektir.
profesyoneller
- Tüm tarayıcılarda çalışır.
- Ekstra yatırım yok.
eksiler
- Yeterli alan olmadığında içerik kaybolur (örneğin, div gövdenin içindedir ve kullanıcı pencereleri küçültür, bu durumda kaydırma çubukları görünmez.
3. yöntem
Bu yöntemde içerik div'ini başka bir div ile saracağız. Yüksekliğini %50'ye (height: %50;) ve alt kenar boşluğunu yüksekliğinin yarısına (margin-bottom:-contentight;) ayarlayın. İçerik kayan noktayı temizleyecek ve ortalanacaktır.
profesyoneller
- Tüm tarayıcılarda çalışır.
- Yeterli alan olmadığında (örneğin, pencere küçültüldüğünde) içerik kesilmez, kaydırma çubukları görünür.
eksiler
- Sadece bir tane düşünüyorum: fazladan boş bir öğe kullanılıyor.
4. yöntem.
Bu yöntem, position:absolute özelliğini kullanır; sabit boyutlara (genişlik ve yükseklik) sahip div'ler için. Ardından koordinatlarını top:0; alt:0; , ancak sabit bir yüksekliğe sahip olduğu için esnemez ve merkezlenir. Bu, sabit genişlikli bir blok düzeyinde öğeyi (margin: 0 auto;) yatay olarak merkezlemenin iyi bilinen yöntemine çok benzer.
profesyoneller
- Çok basit.
eksiler
- Internet Explorer'da çalışmıyor
- Kapta yeterli alan yoksa içerik kaydırma çubukları olmadan kırpılır.
5. yöntem
Tek bir metin satırını ortalamak için bu yöntemi kullanabilirsiniz. Sadece metnin yüksekliğini (satır yüksekliği) öğenin yüksekliğine (yükseklik) ayarlayın. Bundan sonra, çizgi ortada görüntülenecektir.
profesyoneller
- Tüm tarayıcılarda çalışır.
- Sığmazsa metni kesmez.
eksiler
- Yalnızca metinle çalışır (blok öğeleriyle çalışmaz).
- Birden fazla metin satırı varsa, çok kötü görünüyor.
Bu yöntem, metni bir düğmede veya metin alanında ortalamak gibi küçük öğeler için çok kullanışlıdır.
Artık dikey merkez hizalamasını nasıl yapacağınızı bildiğinize göre, sonunda şöyle görünecek basit bir web sitesi yapalım:
Aşama 1
Anlamsal işaretlemeyle başlamak her zaman iyidir. Sayfamız şu şekilde yapılandırılacaktır:
- #floater (içeriği ortalamak için)
- #merkezli (merkez öğe)
- #taraf
- #logo
- #nav (liste
- #içerik
- #bottom (telif hakları ve tümü için)
Aşağıdaki html işaretlemesini yazalım:
Merkezli Bir Şirket Bir şirketSayfa başlığı
Süreç merkezli işbirliği ve fikir paylaşımının ardından katma değerli dış kaynak kullanımını bütünsel olarak yeniden yapılandırın. Etkinleştirilmiş zorunluluklar aracılığıyla etkili niş pazarları enerjik bir şekilde basitleştirin. Zorlayıcı senaryolardan sonra birinci sınıf yeniliğe bütünsel olarak hakim olun. Son teknoloji ürünü ürünlerle insan sermayesindeki yüksek standartları sorunsuz bir şekilde yeniden tanımlayın. Güçlü sanallardan önce standartlara uyumlu şemaları belirgin bir şekilde bir araya getirin. Kullanıma hazır bilgiler karşısında kaldıraçlı web hazırlığını benzersiz bir şekilde yeniden özetleyin.
Başlık 2
Müşteri tarafından yönlendirilen süreçler yerine özelleştirilmiş web hazırlığını verimli bir şekilde benimseyin. Proaktif teknolojiler karşısında platformlar arası zorunlulukları iddialı bir şekilde büyütün. Kurumsal çapta arabirimler olmadan çok disiplinli meta hizmetleri uygun şekilde güçlendirin. Odaklanmış e-pazarlarla rekabetçi stratejik tema alanlarını uygun şekilde düzene sokun. Katma değerli pazarlar karşısında birinci sınıf toplulukları fosforlu bir şekilde birleştirin. Sağlam e-hizmetlerden önce bütünsel hizmetleri uygun şekilde yeniden icat edin.
Telif hakkı bildirimi buraya gelecek
Adım 2
Şimdi sayfaya eleman yerleştirmek için en basit CSS'yi yazacağız. Bu kodu style.css dosyasına kaydetmelisiniz. Bağlantının html dosyasına yazıldığı üzerindedir.
Html, gövde ( kenar boşluğu: 0; dolgu: 0; yükseklik: %100; ) gövde ( arka plan: url("page_bg.jpg") %50 %50 tekrarsız #FC3; yazı tipi ailesi: Georgia, Times, serifler; ) #floater ( konum: göreli; kayan: sol; yükseklik: %50; kenar boşluğu: -200 piksel; genişlik: 1 piksel; ) #ortalanmış ( konum: göreli; açık: sol; yükseklik: 400 piksel; genişlik: %80; maks. -genişlik: 800 piksel; min-genişlik: 400 piksel; kenar boşluğu: 0 otomatik; arka plan: #fff; kenarlık: 4 piksel katı #666; ) #bottom ( konum: mutlak; alt: 0; sağ: 0; ) #nav ( konum: mutlak; sol: 0; üst: 0; alt: 0; sağ: %70; dolgu: 20 piksel; kenar boşluğu: 10 piksel; ) #content ( konum: mutlak; sol: %30; sağ: 0; üst: 0; alt: 0; taşma: otomatik; yükseklik: 340 piksel; dolgu: 20 piksel; kenar boşluğu: 10 piksel; )
İçeriğimizi merkeze hizalı hale getirmeden önce, gövde ve html yüksekliklerini %100 olarak ayarlamamız gerekiyor. Yükseklik, iç ve dış dolgu (doldurma ve kenar boşluğu) olmadan kabul edildiğinden, kaydırma çubukları olmaması için onları (doldurma) 0 olarak ayarladık.
"kayan" öğe için alt dolgu, içeriğin yüksekliğinin (400 piksel) eksi yarısıdır, yani -200 pikseldir;
Sayfanız şimdi şöyle görünmelidir:
#centered öğesinin genişliği %80'dir. Bu, sitemizi küçük ekranlarda daraltır ve büyük ekranlarda genişletir. çoğu site, sol üst köşedeki yeni geniş monitörlerde çirkin görünüyor. Min-width ve max-width özellikleri de sayfamızı çok geniş veya çok dar görünmeyecek şekilde sınırlar. Internet Explorer bu özellikleri desteklemiyor. Sabit bir genişliğe ayarlanması gerekir.
#centered öğesi, position:relative olarak ayarlandığından, içindeki öğelerin mutlak konumlandırmasını kullanabiliriz. Ardından overflow:auto; #content öğesi için, sığdırılacak içerik yoksa kaydırma çubukları görünür.
Aşama 3
Ve yapacağımız son şey, sayfanın biraz daha çekici görünmesi için biraz stil eklemek. Menü ile başlayalım.
#nav ul ( liste stili: yok; dolgu: 0; kenar boşluğu: 20px 0 0 0; metin girintisi: 0; ) #nav li ( dolgu: 0; kenar boşluğu: 3px; ) #nav li a ( ekran: blok; background-color: #e8e8e8; padding: 7px; margin: 0; text-decoration: none; color: #000; border-bottom: 1px solid #bbb; text-align: right; ) #nav li a::after ( içerik: """; renk: #aaa; yazı tipi ağırlığı: kalın; ekran: satır içi; kayan nokta: sağ; kenar boşluğu: 0 2px 0 5px; ) #nav li a:hover, #nav li a:odak ( arka plan: # f8f8f8; border-bottom-color: #777; ) #nav li a:hover::after ( marj: 0 0 0 7px; color: #f93; ) #nav li a:active ( padding: 8px 7px 6px 7px; )
Menünün daha iyi görünmesini sağlamak için yaptığımız ilk şey, list-style:none özniteliğini ayarlayarak madde işaretlerini kaldırmak ve varsayılanlar tarayıcılar arasında büyük farklılıklar gösterdiğinden dolgu ve dolguyu ayarlamak oldu.
Daha sonra, bağlantıların blok düzeyinde öğeler olarak işlenmesi gerektiğini belirttiğimize dikkat edin. Şimdi, görüntülendiklerinde, bulundukları elemanın tüm genişliği boyunca gerilirler.
Menüler için kullandığımız bir başka ilginç şey de :before ve :after sözde sınıflarıdır. Bir öğeden önce ve sonra bir şeyler eklemenize izin verirler. Bu, her bağlantının sonuna ok gibi simgeler veya semboller eklemenin iyi bir yoludur. Bu hile Internet Explorer 7 ve altında çalışmaz.
Adım 4
Ve son olarak, daha fazla güzellik için tasarımımıza bazı tüller ekleyeceğiz.
#ortalanmış ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 ( yazı tipi ailesi: Helvetica, Arial, sans- serif; font-weight: normal; color: #666; ) h1 ( color: #f93; border-bottom: 1px solid #ddd; letter-spacing: -0.05em; font-weight: bold; margin-top: 0; padding-top: 0; ) #bottom ( padding: 10px; font-size: 0.7em; color: #f03; ) #logo ( font-size: 2em; text-align: center; color: #999; ) #logo güçlü ( yazı tipi ağırlığı: normal; ) #logo aralığı ( ekran: blok; yazı tipi boyutu: 4em; satır yüksekliği: 0,7em; renk: #666; ) p, h2, h3 ( satır yüksekliği: 1,6em; ) bir ( renk: #f03; )
Bu stillerde #centered öğesi için yuvarlatılmış köşeler ayarladık. CSS3'te bu, border-radius özelliği tarafından ele alınacaktır. Bu, Mozilla Firefox ve Safari/Webkit için -moz ve -webkit ön eklerinin kullanılması dışında bazı tarayıcılar tarafından henüz uygulanmamaktadır.
Uyumluluk
Tahmin edebileceğiniz gibi, uyumluluk sorunlarının ana kaynağı Internet Explorer'dır:
- #floater öğesi bir genişliğe ayarlanmalıdır
- IE 6'daki menüler etrafında ekstra dolgu
Çoğu zaman görev, bloğu sayfanın / ekranın ortasına hizalamaktır ve hatta bir java betiği olmadan, sabit boyutlar veya negatif girintiler ayarlamadan, böylece blok boyutunu aşarsa kaydırma çubukları ebeveyn üzerinde çalışır. Bir bloğun ekranın merkezine nasıl hizalanacağına dair internette oldukça fazla monoton örnek var. Kural olarak, çoğu aynı ilkelere dayanmaktadır.
Sorunu çözmenin ana yolları, artıları ve eksileri aşağıdadır. Örneklerin özünü anlamak için, belirtilen bağlantılardaki örneklerde Sonuç penceresinin yüksekliğini / genişliğini azaltmanızı öneririm.Seçenek 1. Negatif dolgu.
konumlandırma engellemek top ve left niteliklerini %50 oranında artırın ve bloğun yüksekliğini ve genişliğini önceden bilerek, boyutun yarısına eşit olan bir negatif kenar boşluğu ayarlayın engellemek. Bu seçeneğin büyük bir dezavantajı, negatif girintileri saymanız gerekmesidir. Ayrıca engellemek kaydırma çubukları ortamında pek doğru davranmaz - negatif girintilere sahip olduğu için basitçe kesilir.Ebeveyn ( genişlik: %100; yükseklik: %100; konum: mutlak; üst: 0; sol: 0; taşma: otomatik; ) .block ( genişlik: 250 piksel; yükseklik: 250 piksel; konum: mutlak; üst: %50; sol : %50; kenar boşluğu: -125 piksel 0 0 -125 piksel; img ( maks-genişlik: %100; yükseklik: otomatik; ekran: blok; kenar boşluğu: 0 otomatik; kenarlık: yok; ) )
Seçenek 2: Otomatik girinti.
Daha az yaygın, ancak ilkine benzer. İçin engellemek genişliği ve yüksekliği ayarlayın, sağ üst alt sol öznitelikleri 0 olarak konumlandırın ve otomatik kenar boşluğunu ayarlayın. Bu seçeneğin avantajı çalışan kaydırma çubuklarıdır. ebeveyn, ikincisi %100 genişliğe ve yüksekliğe sahipse. Bu yöntemin dezavantajı katı boyutlandırmadır.Ebeveyn ( genişlik: %100; yükseklik: %100; konum: mutlak; üst: 0; sol: 0; taşma: otomatik; ) .block ( genişlik: 250 piksel; yükseklik: 250 piksel; konum: mutlak; üst: 0; sağ: 0; alt: 0; sol: 0; kenar boşluğu: otomatik; img (maksimum genişlik: %100; yükseklik: otomatik; ekran: blok; kenar boşluğu: 0 otomatik; kenarlık: yok; ) )
Seçenek 3. Tablo.
Biz sorarız ebeveyn tablo stilleri, hücre ebeveyn Metin hizalamasını merkeze ayarlayın. A blok satır içi blok modelini ayarlayın. Dezavantajlar, çalışan kaydırma çubukları değildir ve genel olarak tablonun "öykünme" estetiği değildir.Ebeveyn ( genişlik: %100; yükseklik: %100; ekran: tablo; konum: mutlak; üst: 0; sol: 0; > .inner ( ekran: tablo hücresi; metin hizalama: orta; dikey hizalama: orta; ) ) .block ( ekran: satır içi blok; img ( ekran: blok; kenarlık: yok; ) )
Bu örneğe kaydırma eklemek için yapıya bir eleman daha eklemeniz gerekecek.
Örnek: jsfiddle.net/serdidg/fk5nqh52/3 .Seçenek 4. Sahte öğe.
Bu seçenek, önceki yöntemlerde listelenen tüm sorunları içermez ve orijinal görevleri de çözer. mesele şu ki ebeveyn stilleri ayarla sözde elemanönce, yani %100 yükseklik, merkez hizalama ve satır içi kutu modeli. İle aynı engellemek satır içi bloğun modelini, orta hizalamayı koyun. İle engellemek altına düşmedi sözde eleman ilkinin boyutları daha büyük olduğunda ebeveyn, belirtin ebeveyn beyaz boşluk: şimdi rap ve yazı tipi boyutu: 0 ve ardından y engellemek bu stilleri aşağıdakilerle iptal edin - boşluk: normal. Bu örnekte, aralarında oluşan boşluğu kaldırmak için font-size: 0 gereklidir. ebeveyn Ve engellemek kod biçimlendirme ile bağlantılı olarak. Boşluk başka şekillerde giderilebilir, ancak buna izin vermemek en iyisi olarak kabul edilir.Ebeveyn ( genişlik: %100; yükseklik: %100; konum: mutlak; üst: 0; sol: 0; taşma: otomatik; boşluk: şimdi rap; metin hizalama: merkez; yazı tipi boyutu: 0; &:before ( yükseklik: %100; ekran: satır içi blok; dikey hizalama: orta; içerik: ""; ) ) .block ( ekran: satır içi blok; boşluk: normal; dikey hizalama: orta; metin hizalama: sol ; img (ekran: blok; kenarlık: yok; ) )
Veya, ebeveynin sayfanın tamamını değil, yalnızca pencerenin yüksekliğini ve genişliğini kaplamasını istiyorsanız:
Üst ( konum: sabit; üst: 0; sağ: 0; alt: 0; sol: 0; taşma: otomatik; boşluk: şimdi rap; metin hizalama: merkez; yazı tipi boyutu: 0; &:before ( yükseklik: %100; ekran: satır içi blok; dikey hizalama: orta; içerik: ""; ) ) .blok ( ekran: satır içi blok; boşluk: normal; dikey hizalama: orta; metin hizalama: sol; img ( ekran: blok; kenarlık: yok; ) )
Seçenek 5. Flexbox.
En basit ve en zarif yollardan biri flexbox kullanmaktır. Gereksiz vücut hareketleri gerektirmez, olan bitenin özünü oldukça açık bir şekilde anlatır ve yüksek esnekliğe sahiptir. Bu yöntemi seçerken hatırlanması gereken tek şey, sürüm 10 dahil olmak üzere IE desteğidir. caniuse.com/#feat=flexboxEbeveyn ( genişlik: %100; yükseklik: %100; konum: sabit; üst: 0; sol: 0; ekran: esnek; hizalama öğeleri: merkez; içeriği hizala: merkez; içeriği haklı çıkar: merkez; taşma: otomatik; ) .block ( arka plan: #60a839; img ( ekran: blok; kenarlık: yok; ) )
Seçenek 6. Dönüştür.
Yapıyla sınırlıysak uygundur ve ana öğeyi manipüle etmenin bir yolu yoktur, ancak bloğun bir şekilde hizalanması gerekir. translate() css işlevi kurtarmaya gelecek. %50 mutlak konum değeri, kutunun sol üst köşesini tam olarak merkezde konumlandırır, ardından negatif çevirme değeri kutuyu kendi boyutlarına göre hareket ettirir. Olumsuz etkilerin bulanık kenarlar veya yazı tipi stili şeklinde görünebileceğini lütfen unutmayın. Ayrıca, benzer bir yöntem, java-script "a kullanılarak bloğun konumunun hesaplanmasında sorunlara yol açabilir. Bazen, sol css özelliğinin kullanılması nedeniyle genişliğin %50'lik kaybını telafi etmek için, kural ayarlanır. blok yardımcı olabilir: sağ kenar boşluğu: -50%; .Ebeveyn ( genişlik: %100; yükseklik: %100; konum: sabit; üst: 0; sol: 0; taşma: otomatik; ) .block ( konum: mutlak; üst: %50; sol: %50; dönüşüm: çevir( -50%, -50%); img ( ekran: blok; ) )
Seçenek 7. Düğme.
Kullanıcı seçeneği nerede engellemek bir düğme etiketine sarılmış. Düğme, içindeki her şeyi, yani satır içi ve blok satır (satır içi blok) modelinin öğelerini ortalama yeteneğine sahiptir. Pratikte tavsiye etmiyorum.Ebeveyn ( genişlik: %100; yükseklik: %100; konum: mutlak; üst: 0; sol: 0; taşma: otomatik; arka plan: yok; kenarlık: yok; anahat: yok; ) .block ( ekran: satır içi blok; img (ekran: blok;; kenarlık: yok; ) )
Bonus
4. seçenek fikrini kullanarak, kenar boşluklarını ayarlayabilirsiniz. engellemek ve aynı zamanda ikincisi, kaydırma çubukları ortamında yeterince gösterilecektir.
Örnek: jsfiddle.net/serdidg/nfqg9rza/2 .Ayrıca resmi ortaya hizalayabilirsiniz ve eğer resim daha büyükse ebeveyn, boyutuna göre ölçeklendirin ebeveyn.
Örnek: jsfiddle.net/serdidg/nfqg9rza/3 .
Büyük resim örneği:Bugünün makalesi, bir div'i hem yatay hem de dikey olarak ortalamak için birkaç CSS hilesini nasıl kullanacağınızı göstermeyi amaçlıyor. Ayrıca tüm sayfayı veya tek bir div öğesini nasıl ortalayacağınızı da göstereceğiz.
Bir DIV öğesinin bir sayfada basit bir şekilde ortalanması
Bu yöntem tüm tarayıcılarda sorunsuz çalışacaktır.
css
Merkez-div ( kenar boşluğu: 0 otomatik; genişlik: 100 piksel; )
Örnek
margin özelliğindeki auto değeri, sol ve sağ dolguyu sayfada bulunan tüm alana ayarlar. Burada hatırlanması gereken önemli şey, ortalanmış div'in genişliğinin ayarlanmış olması gerektiğidir.
Bir DIV öğesinin içinde bir DIV'yi eski yöntemle ortalamak
Bu merkez div yöntemi tüm tarayıcılarda çalışacaktır.
css
Dış div ( dolgu: 30px; ) .inner-div ( kenar boşluğu: 0 otomatik; genişlik: 100 piksel; )
HTML
Örnek
Dış div istediğiniz gibi konumlandırılabilir, ancak iç div belirtilen bir genişliğe sahip olmalıdır ( Genişlik).
Satır içi blok ile bir DIV öğesinin içinde bir DIV'yi ortalamak
Bir div'i bir div içinde ortalamak için kullanılan bu yöntemde, iç öğenin genişliğini belirtmek gerekli değildir. IE8 dahil tüm modern tarayıcılarda çalışacaktır.
css
Dış div ( dolgu: 30px; metin hizalama: merkez; ) .inner-div ( ekran: satır içi blok; dolgu: 50 piksel; )
HTML
Örnek
text-align özelliği yalnızca satır içi öğelerde çalışır. Satır içi blok değeri, iç div'in bir satır içi öğenin yanı sıra bir blok ( satır içi blok). Dış div üzerindeki text-align özelliği, iç div'i ortalamamıza izin verecektir.
Bir DIV öğesinin içinde bir DIV'yi yatay ve dikey olarak ortalamak
Burada marj: otomatik, div'i sayfanın ortasına ortalamak için kullanılır. Örnek, tüm modern tarayıcılarda çalışacaktır.
css
Dış div ( dolgu: 30px; ) .inner-div ( kenar boşluğu: otomatik; genişlik: 100 piksel; yükseklik: 100 piksel; )
HTML
Örnek
İç div bir genişliğe sahip olmalıdır ( Genişlik) ve yükseklik ( yükseklik). Dış div sabit bir yüksekliğe sahipse yöntem çalışmaz.
Bir DIV'yi sayfanın altında ortalamak
Bu, div'i dikey olarak ortalamak için marjin: otomatik ve dış öğe için mutlak konumlandırma kullanır. Yöntem, tüm modern tarayıcılarda çalışacaktır.
css
Dış div ( konum: mutlak; alt: 30 piksel; genişlik: %100; ) .inner-div ( kenar boşluğu: 0 otomatik; genişlik: 100 piksel; yükseklik: 100 piksel; arka plan rengi: #ccc; )
HTML
Örnek
İç div bir genişlik ayarına sahip olmalıdır. Sayfanın altındaki boşluk, dış div'in alt özelliği kullanılarak ayarlanır. Ayrıca, alt özelliği üst özellik ile değiştirerek div'i sayfanın üst kısmında ortalayabilirsiniz.
Bir DIV'yi sayfada dikey ve yatay olarak ortalama
Burada, div'i merkeze hizalamak için, margin: auto tekrar kullanılır ve dış div mutlak olarak konumlandırılır. Yöntem, tüm modern tarayıcılarda çalışacaktır.
css
Merkez-div ( konum: mutlak; kenar boşluğu: otomatik; üst: 0; sağ: 0; alt: 0; sol: 0; genişlik: 100 piksel; yükseklik: 100 piksel; )
Örnek
div öğesi bir genişlik kümesine sahip olmalıdır ( Genişlik) ve yükseklik ( yükseklik).
Bir DIV öğesinin bir sayfada duyarlı olarak ortalanması
Burada, div'i CSS ile ortalamak için div öğesinin genişliğini, pencerenin yeniden boyutlandırılmasına yanıt verecek şekilde duyarlı hale getiriyoruz. Bu yöntem tüm tarayıcılarda çalışır.
css
Merkez-div ( kenar boşluğu: 0 otomatik; maksimum genişlik: 700 piksel; )
Örnek
Ortalanmış div'in maksimum genişlik özelliği ayarlanmış olmalıdır.
İç blok özelliklerini kullanarak bir DIV'yi bir elemanın içinde ortalamak
İç div burada yanıt veriyor. Bir div'i bir div içinde ortalamak için kullanılan bu yöntem, tüm tarayıcılarda çalışacaktır.
css
Dış div ( dolgu: 30px; ) .inner-div ( marj: 0 otomatik; maksimum genişlik: 700 piksel; )
HTML
Örnek
İç div'in max-width özelliği ayarlanmış olmalıdır.
İki duyarlı div'i yan yana ortalamak
Burada yan yana iki duyarlı div var. Div'i ekranda ortalamanın bu yöntemi tüm modern tarayıcılarda çalışacaktır.
css
Container ( text-align: center; ) .left-div ( display: inline-block; max-width: 300px; Vertical-align: top; ) .right-div ( display: inline-block; max-width: 150px; ) ekran ve (maks-genişlik: 600px) ( .left-div, .right-div ( lef maks-genişlik: %100; ) )
HTML
Örnek
Burada, ortalanmış bir kap içinde uygulanan inline-block özelliğine sahip birkaç öğemiz var. Bu örnek ayrıca CSS ortam sorgularını kullanır; yani ekran boyutu 600 pikselden küçükse, hem sol hem de sağ div'ler için max-width özelliği %100 olarak ayarlanır.
Flexbox ile ortalanmış DIV öğesi
Burada Flexbox kullanarak CSS div'ini ortalıyoruz. Kullanıcı arayüzü tasarım sürecini kolaylaştırmak amaçlanmıştır. Bu eklenti Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+ ve Android Tarayıcı 40+ tarafından desteklenmektedir.
css
Container ( display: flex; align-items: center; justify-content: center; height: 100vh; ) .item ( background-color: #f3f2ef; border-radius: 3px; width: 200px; height: 100px; )
- #taraf
