Yatay ve dikey eleman hizalaması. CSS ile öğelerin dikey hizalaması

Ben birçoğunuzun oyun oynaması gereken çoğunuzun, elemanları dikey olarak hizalama ve hangi zorlukların merkezdeki hizaladıklarında hangi zorlukların ortaya çıkması gerektiğini düşünüyorum.

Evet, CSS'deki dikey hizalama için, birçok değerle dikey hizalama özel bir versiyonu vardır. Ancak, pratikte beklendiği kadar işe yarıyor. Bunu çözmeye çalışalım.

Aşağıdaki yaklaşımları karşılaştırır. Hizalama:

tablolar,
girintiler
satır yüksekliği,
germe
negatif marj,
dönüşüm,
psödo elemanı
flexbox.

Bir örnek olarak, aşağıdaki örneği düşünün.

İki div elemanı vardır, bunlardan biri diğerine gömülür. Onlara uygun sınıfları veririz - dış ve iç.

Görev, iç elemanı harici elemanın ortasına hizalamak içindir.

Başlamak için, dış ve iç bloğun boyutları olduğunda durumu düşünün bilinen. Dahili elemanı Ekran Kuralı ekleyin: Satır içi blok ve harici - Metin-Hizala: Merkez ve dikey hizalama: orta.

Hizalamanın sadece bir satır içi veya satır içi blok ekran moduna sahip olan elemanlara uygulandığı NPomnia.

Blokları boyutlarını ve sınırlarını görmek için arka plan renklerini de belirledik.

Dış (Genişlik: 200px; Yükseklik: 200px; Metin Hizası: Merkez; Dikey Hizala: Orta; Arka Plan-Renk: #FFC;) İç (Ekran: Inline-blok; Genişlik: 100px; Yükseklik: 100PX; Arka Plan-Renk: #fcc;)
Stilleri uyguladıktan sonra, iç bloğun yatay olarak seviyelendiğini ve dikey olmadığını göreceğiz:
http://jsfiddle.net/c1bgfffq/

Neden oldu? Gerçek şu ki, dikey hizalama özelliğinin hizalamayı etkilediğidir. elemanın kendisi ve içeriği değil (Tablo hücreleri için geçerli olduğunda). Bu nedenle başvuru bu mülk Dış öğeye hiçbir şey vermedi. Ayrıca, bu özelliğin iç elemana kullanımı da bir şey verecektir, çünkü küçük harf blokları (satır içi blok), komşu bloklara göre dikey olarak hizalanır ve bizim durumumuzda bir küçük harf bloğumuz var.

Bu sorunu çözmek için çeşitli teknikler vardır. Her birini daha fazla düşünün.

Bir tablo kullanarak hizalama

İlk izin çözümü, tablonun harici bloğunu bir hücreden değiştirmektir. Bu durumda, hizalama, hücrenin içeriğine, yani iç bloğa uygulanacaktır.

http://jsfiddle.net/c1bgfffq/1//////////////jsfq/1//

Açık eksi bu çözüm - Anlambilimin bakış açısından, yanlışlıkla hizalama için tabloları uyguluyor. İkinci eksi, bir tablo oluşturmak için harici bloğun etrafında başka bir eleman eklemenin gerekli olmasıdır.

İlk eksi kısmen çıkarılabilir, DIV'deki tabloyu ve TD etiketlerini değiştirebilir ve ekranın tablo modunu CSS'de ayarlanabilir.

.ER-wrapper (Ekran: Tablo;). Sağ (Ekran: Tablo-hücre;)
Bununla birlikte, harici birim, bunun tüm sonuçlarına sahip bir tabloda kalacaktır.

Girintili hizalama

Dahili ve harici bloğun yüksekliği bilinirse, hizalama, formülü kullanarak iç üniteden dikey girintiler kullanılarak sorulabilir: (H dış - H iç kısmı) / 2.

Dış (yükseklik: 200px;) .inner (yükseklik: 100px; kenar boşluğu: 50px 0;)
http://jsfiddle.net/c1bgfffq/6/

Eksi Çözümler - Her iki blok da bilindiğinde sadece sınırlı sayıda dava için geçerlidir.

Hat Yükseklik Hizalama

İç ünitenin metnin birden fazla satırını alması gerektiği biliniyorsa, çizgi yükseklik özelliğini kullanabilir ve harici bloğun eşit bir yüksekliği ayarlayabilirsiniz. İç ünitenin içeriği ikinci çizgiye aktarılmaması gerektiği için, beyaz alan kurallarını eklemeniz de önerilir: NowRAP ve taşma: Gizli.

Dış (Yükseklik: 200px; Hat Yüksekliği: 200px;) .inner (Beyaz-Boşluk: NowRap; Taşma: Gizli;)
http://jsfiddle.net/c1bgfffq/12/

Ayrıca, bu teknik, iç ünitenin hat yüksekliği değerini geçersiz kılınması ve ekran eklenmesi için çok satırlı metnin hizalanmasına da uygulanabilir: Ekran ekle: Inline-blok ve dikey hizalama: orta.

Dış (Yükseklik: 200px; Hat Yüksekliği: 200px;) .inner (Hat Yükseklik: Normal; Ekran: Inline-blok; Dikey Hizala: Orta;)
http://jsfiddle.net/c1bgffffq/15/

Eksi bu method Harici bloğun yüksekliğinin bilinmesi gerektiğidir.

"Germe" ile uyum

Bu yöntem, harici bloğun yüksekliği bilinmediğinde kullanılabilir, ancak dahili yüksekliği bilinir.

Bunun için ihtiyacınız var:

dış bloğu göreceli konumlandırmayı ve içsel - mutlak;
Üstün iç bloğunu ekleyin: 0 ve alt: 0, bunun sonucunda dış bloğun tüm yüksekliğine uzanır;
İç ünitenin dikey girintisi için otomatik değerini ayarlayın.

. Sağ (Konum: Göreceli;) İç (Yükseklik: 100px; Konum: Mutlak; Üst: 0; Alt: 0; Marj: Otomatik 0;)
http://jsfiddle.net/c1bgfffq/4/

Bu tekniğin özü, gergin ve kesinlikle aşınmış blok için yükseklik kümesinin, değerlerinin otomatik olarak ayarlandığı takdirde, dikey girintileri eşit oranda hesaplamasına neden olmasıdır.

Negatif marj-top yardımıyla hizalama

Bu yöntem geniş bir şöhret aldı ve çok sık kullanılıyor. Önceki kişi olarak, dış bloğun yüksekliği bilinmediğinde kullanılır, ancak dahili yüksekliği bilinir.

Göreceli konumlandırmanın harici bloğunu belirlemek gerekir ve dahili mutlaktır. Ardından, iç bloğu harici bloğun yüksekliğinin yarısına kadar hareket ettirmek gerekir:% 50 ve% 50 yüksekliğinin yarısını yükseltilmesi gerekir: -H iç / 2.

Dış (pozisyon: göreceli;) .inner (yükseklik: 100px; pozisyon: mutlak; üst:% 50; marj üstü: -50px;)
http://jsfiddle.net/c1bgfffq/13/

Bu yöntemin eksi - iç ünitenin yüksekliği bilinmelidir.

Dönüşüm ile uyum

Bu yöntem öncekine benzer, ancak iç bloğun yüksekliği bilinmediğinde uygulanabilir. Bu durumda, piksellerde olumsuz bir gerilik ayarlamak yerine, Translatey işlevini ve% -50 değerini kullanarak Dönüştürme özelliğini kullanabilir ve iç bloğu kaldırabilirsiniz.

Dış (pozisyon: göreceli;) .inner (pozisyon: mutlak; üst:% 50; dönüşüm: translatey (-50%);)
http://jsfiddle.net/c1bgfffq/9/

Neden önceki şekilde yüzde bir değer belirlemek imkansızdı? Marj mülkünün yüzde değerleri ebeveyn elemana göre hesaplandığından,% 50'lik değeri harici bloğun yüksekliğinin yarısı olacaktır ve iç bloğu kendi yüksekliğinin yarısına yükseltmemiz gerekiyordu. Bunun için, dönüştürme özelliği uygundur.

Bu yöntemin eksi - iç ünitenin mutlak konumlandırılması durumunda uygulanamaz.

FlexBox ile Hizalama

Dikey hizalamanın en modern yolu esnek kutu düzenini kullanmaktır (insanlar FlexBox olarak bilinir). Bu modül Lütfen sayfadaki elemanların konumlandırılmasını, lütfen pratik olarak yerleştirmenizi sağlar. FlexBox ortasındaki hizalama çok basit bir görevdir.

Harici ünitenin ekran ayarlaması gerekir: Flex ve Dahili - Marj: Otomatik. Ve hepsi bu! Güzel. Değil mi?

Dış (Ekran: Flex; Genişlik: 200px; Yükseklik: 200px;) .inner (Genişlik: 100PX; Marjı: Otomatik;)
http://jsfiddle.net/c1bgffffq/14/

Bu yöntemin eksi - FlexBox yalnızca modern tarayıcılar tarafından desteklenir.

Seçmenin yolu nedir?

Sorunun ayarından geçmek gerekir:

Dikey metin hizalaması için, dikey girintileri veya çizgi yükseklik özelliğini kullanmak daha iyidir.
Bilinen bir yüksekliğe sahip kesinlikle konumlandırılmış elemanlar için (örneğin, simgeler), negatif marjlı üst özelliğe sahip bir yöntem idealdir.
Daha karmaşık durumlar için, blok yüksekliği bilinmediğinde, bir sözde eleman veya dönüşüm özelliği kullanmanız gerekir.
Peki, çok şanslıysanız, IE tarayıcısının eski sürümlerini korumanıza gerek kalmazsanız, o zaman, elbette, FlexBox'u kullanmak daha iyidir.

Etiketler: Etiketler ekleyin

Her katman, içeriği bloktaki hizalama ihtiyacına sürekli olarak bakıyor: yatay veya dikey olarak. Bu konuda bazı iyi makaleler var, ancak hepsi bir sürü ilginç şeyler sunar, çünkü bunlar için en önemli şeyi vurgulamak için çok fazla zaman harcamak zorundasınız. Bu bilgiyi artık Google'da değil, benim için uygun olan formda göndermeye karar verdim.

Bilinen boyutlarda blokları hizalama

En Kolay S. cSS'yi kullanma. Yüksekliğin önceden bilinen blokları (dikey hizalama için) veya genişlik (yatay hizalama için) hizalayın.

Dolgulu hizalama

Bazen öğeyi merkezleyemezsiniz, ancak sınırını sınırla ekleyebilirsiniz " dolgu malzemesi.".

Örneğin, 200 piksel başına 200'lük bir resim vardır ve 240 ila 300 bloğunda ortadan kaldırmak gerekir. ve sol ve sağda 50.

.Example-wrapper1 (arka plan: # 535E73; genişlik: 200px; yükseklik: 200px; dolgu: 20px 50px;)

Kesinlikle konumlandırılmış blokların hizalanması

Blok ayarlanmışsa " konum: Mutlak.", sonra" Konum: Göreceli "ile en yakın ebeveyne göre konumlandırılabilir. Bunun için tüm özelliklere ihtiyacınız var (" Üst.","sağ","alt","ayrıldı.") Atanacak bir iç ünite aynı değerYanı sıra "Marj: Oto".

* Bir nüans var: İç ünite + sol değerinin (sağ, alt, üst) genişliği (sağ, alt, üst) ebeveyn bloğunun boyutunu aşmamalıdır. Güvenilir sol özellikler (sağ, alt, üst) 0 (sıfır) atayın.

.Example-wrapper2 (Konum: Göreceli; Yükseklik: 250px; Arka Plan: URL (Space.jpg);) .CAT-King (Genişlik: 200px; Yükseklik: 200px; Konum: Mutlak; Üst: 0; Sol: 0; Alt: 0; Sağ: 0; Marj: Otomatik; Arka Plan: URL (King.PNG);)

Yatay hizalama

"Metin-Align: Center" ile hizalama

Metni bloğa hizalamak için özel bir özellik var " metin hizalama.". SET değeri ile" merkez"Her metin satırı yatay olarak seviyelendiriyor. Çok satırlı metin için, böyle bir çözüm son derece nadir kullanılır, daha sık, bu seçenek, spans, linklerin veya resimlerin hizalanması için daha sık bulunabilir.

Metni, metin hizalamasının CSS ile nasıl çalıştığını göstermek için metni icat etmek zorunda kaldığında, ancak kafanın ilginç bir şey olmadı. İlk başta, çocukların şiirinde bir yere bir yerlerde kopyalamaya karar verdim, ancak makalenin benzersizliğini belirlediğini hatırladım ve sevgili okuyucularımız bunu Google'da bulamayacak. Sonra bu paragrafı yazmaya karar verdim - sonuçta, özün yanında değil, aynı zamanda hizalamada özü.

.Example-Metin (Metin Hizası: Merkez; Dolgu: 10px; Arka Plan: # FF90B8;)

Bu özelliğin sadece metin için değil, aynı zamanda herhangi bir küçük harf elemanları için ("Ekran: Inline") için de çalışacağına dikkat ediyor.

Ancak bu metin sol kenara hizalanır, ancak merkezdeki sargıya göre seviyelendiren blokta.

.Example-Wrapper3 (Metin Hizası: Merkezi; Arka Plan: # FF90B8;) .inLine-Metin (Ekran: Inline-blok; Genişlik: 40%; Dolgu: 10px; Metin Hizası: Sol; Arka Plan: # FFE5E5;)

Marj ile Hizalamayı Engelleyin

İyi bilinen bir genişliğe sahip blok elemanları kolayca yatay olarak hizalanır, eğer "kenar boşluğu: Otomatik; Marj-sağ: Otomatik" yüklerseniz. Genellikle kısaltılmış bir giriş kullanılır: " marjı: 0 Otomatik"(Sıfır yerine, herhangi bir anlam olabilir). Ancak dikey seviyelendirme için bu yöntem uygun değildir.

.lama sarmalayıcı (yükseklik: 200px; arka plan: # f1bf88;) .lama1 (yükseklik: 200px; genişlik: 200px; arka plan: URL (lama.jpg); marj: 0 Otomatik;)

Bu, mümkün olduğunda (sabit veya mutlak konumlandırmanın gerekli olmadığı yerlerde), tüm blokları hizalamak için nasıl gereklidir. En mantıklı ve yeterlidir. Açıkça görülmesine rağmen, ama bazen korkutucu örnekleri olumsuz geri çekilme ile gördüm, bu yüzden netleşmeye karar verdim.

Dikey hizalama

Dikey tesviye, çok daha fazla sorunla - görünüşe göre, bu CSS'de sağlanmadı. İstenilen sonucu elde etmenin birkaç yolu vardır, ancak hepsi çok güzel değildir.

Hat Yükseklik Hizalama

Blokta sadece bir satır olduğunda, mülkü uygulayarak dikey hizalamasını elde etmek mümkündür " satır yüksekliği"İstenilen yüksekliği ayarlayın. Güvenilirlik için, değeri" çizgi yüksekliğinin "değerine eşit olacak şekilde" yükseklik "de yüklemek gerekir, çünkü ikincisi tüm tarayıcılarda desteklenmez.

.Example-wrapper4 (Hat Yüksekliği: 100px; Renk: # DC09C0; Arka Plan: # E5DAE1; Yükseklik: 100px; Metin Hizası: Merkezi;)

Birkaç satırla bir blok hizalama elde etmek de mümkündür. Bunu yapmak için, ek bir blok sargısı kullanmanız ve hattın yüksekliğini ayarlamanız gerekir. İç ünite çoklu olabilir, ancak mutlaka "satır içi" olabilir. "Dikey Hizala: Orta" uygulamanız gerekir.

.Example-wrapper5 (hat yüksekliği: 160px; yükseklik: 160px; yazı tipi boyutu: 0; arka plan: # ff9b00;) .Example-wrapper5 .Text1 (Ekran: Inline-blok; Yazı tipi boyutu: 14px; Hat yüksekliği: 1.5; dikey hizalama: orta, arka plan: # fffaf2; renk: # FF9B00; Metin hizası: Merkez;)

Sarıcı ünitesi "Yazı Tipi Boyutu: 0" kurulmalıdır. Sıfır yazı tipi boyutunu ayarlamazsanız, tarayıcı kendinden gereksiz piksel ekler. Ayrıca, iç blok için yazı tipi boyutunu ve dize yüksekliğini belirlemeniz gerekir, çünkü bu özellikler ebeveynden devralınır.

Tablolarda dikey hizalama

Emlak " dikey hizalama"Tablonun hücrelerinde de hareket eder." Orta "değerinde, hücrenin içindeki içerik merkezde hizalanır. Tabii ki, zamanımızdaki bir masa düzeni bir arkaik olarak kabul edilir, ancak olağanüstü durumlarda mümkündür. taklit etmek, " ekran: Tablo-hücre".

Genellikle dikey hizalama için bu seçeneği kullanırım. Hazır projeden alınan yerleşim örneğinin altında. İlgi, bu şekilde dikey olarak ortalanan resimdir.

.One_product .img_wrapper (ekran: tablo hücresi; yükseklik: 169px; dikey hizala: orta; taşma: gizlenmiş; arka plan: #fff; genişlik: 255px;) .one_product img (maksimum yükseklik: 169px; maksimum genişlik: 100 %; Min-Genişlik: 140px; Ekran: Blok; Marj: 0 Otomatik;)

Öğenin "şamandıra" yüklenmesi halinde "hiçbiri" den farklı olduğu unutulmamalıdır, daha sonra herhangi bir durumda blok olacaktır (ekran: blok) - daha sonra ek bir blok sargısı kullanmak zorunda kalacaksınız.

Ek bir satır içi öğeyi hizalamak

Ve uygulayabileceğiniz satır içi öğeler için " dikey Hizala: Orta". Aynı zamanda tüm elemanlarla" ekran: satır içi."Bir satırda olan, toplam merkezi çizgiye göre seviyelendirilir.

Ana bloğun yüksekliğine eşit bir yükseklikte yardımcı bir blok oluşturmak gerekir, daha sonra istenen blok merkezde seviyelendirilir. Bunu yapmak için, psödo elemanları kullanmak uygundur: önce veya: daha sonra.

.Example-Wrapper6 (Yükseklik: 300px; Metin Hizası: Merkezi; Arka Plan: # 70daf1;) .Pube (Ekran: Inline-blok; Dikey Hizala: Orta; Arka Plan: URL (Pudge.png); Arka Plan-Renk: # FFF; genişlik: 200px; yükseklik: 200px;) .riki (Ekran: Inline-blok; Yükseklik:% 100; dikey hizalama: orta;)

Ekran: Flex ve Hizalama

Explorer 8 kullanıcıları ile çok ilgilenmiyorsanız veya o kadar önemliyseniz, onlar için gereksiz bir javascript-a parçası eklemeye hazırsanız, daha sonra "Ekran: Flex" kullanabilirsiniz. Flex blokları, hizalama sorunları ile mükemmel bir şekilde başa çıkıyor ve içeriği içeriği ortadan kaldırmak için "Marj: Otomatik" yazmak yeterlidir.

Şimdiye kadar, pratik olarak benimle buluşmadı, ancak onun için özel bir kısıtlama yok.

.Example-wrapper7 (Ekran: Flex; Yükseklik: 300px; Arka Plan: # AEB96A;) .Example-Wrapper7 IMG (Marj: Otomatik;)

Peki, CSS hizalaması hakkında yazmak istediğim bu. Şimdi içeriğin merkezlenmesi sorun olmayacak!

Sayfayı yatırırken, genellikle CSS yönteminin ortasında hizalama yapmak gerekir: Örneğin, ana üniteyi sıralayın. Her biri er ya da geç bir vergici kullanmanız gerekir, bu sorunu çözmek için çeşitli seçenekler vardır.

Merkezde tesviye metni

Genellikle dekoratif amaçlar halinde, ortadaki metin hizalamasını ayarlamanız gerekir, bu durumda CSS düzen zamanını azaltmanıza olanak sağlar. Daha önce, bu, HTML öznitelikleri kullanılarak yapıldı, şimdi Standart, Stil sayfalarını kullanarak metni hizalamayı gerektirir. Harici girintileri değiştirmeniz gereken blokların aksine, CSS'de, merkezdeki metin hizalaması bir satır kullanılarak gerçekleştirilir:

metin Hizası: Merkez;

Bu özellik devralınır ve ebeveynin tüm torunlarına transfer edilir. Sadece metni değil, aynı zamanda diğer unsurlara da etkiler. Bunu yapmak için, düz (örneğin, yayılma) veya düz bir blok olmalıdır (ekranın: blok özelliği belirtilen bloklar). Son seçenek ayrıca, girintileri daha esnek bir şekilde ayarlamak için elemanın genişliğini ve yüksekliğini değiştirmenizi sağlar.

Genellikle hizalama sayfalarında etiketin kendisine bağlanır. Bu, W3C'yi eski özelliğini belirlediğinden, bu hemen geçersiz bir kodu yapar. Sayfada kullanmak tavsiye edilmez.

Merkezdeki hizalamayı engelle

MERKEZİNDE DIV'nin hizalanmasını ayarlamanız gerekirse, CSS güzel sunabilir uygun yol: Marjın dış girintisini kullanarak. Girintiler hem blok elemanları hem de lüks blokları tanımlanabilir. Prix'in değeri, değerler 0 (dikey girintiler) ve otomatik (otomatik girintiler yatay olarak) almalıdır:

marj: 0 Otomatik;

Şimdi bu seçenek kesinlikle geçerli olarak kabul edilir. Harici girintileri kullanarak, resim hizalamasını merkezdeki ayarlamanıza da izin verir: sayfadaki öğenin konumlandırılmasıyla ilgili birçok sorunu çözmenizi sağlar.

Sol veya sağ kenardaki hizalama bloğu

Bazen CSS merkezindeki hizalama gerekli değildir, ancak yakındaki iki bloğu koymak gerekir: biri sol kenardan, diğeri - sağdan. Bunu yapmak için, üç değerden birini alabilen bir şamandıra özelliği vardır: sol, sağ veya hiç. Yakınlarda bulunması gereken iki bloğun olduğunu varsayalım. Sonra kod böyle olacak:

.Left (şamandıra: sol;)
.Right (şamandıra: sağda)

Ayrıca, ilk iki blok altında bulunması gereken üçüncü bir blok varsa (örneğin, bir altbilgi), daha sonra net özelliği kaydetmesi gerekir:

.Left (şamandıra: sol;)
.Right (şamandıra: sağda)
altbilgi (Net: Her ikisi de)

Gerçek şu ki, sol ve sağ sınıfları olan blokların toplam akıştan çıkması, yani diğer tüm elementler hizalı elemanların varlığını görmezden gelir. Net Mülkiyet: Her ikisi de, futer veya başka bir bloğun, öğelerin akıştan düştüğünü ve hem sol ve sağdaki akışını (şamandırmasını) yasakladığını görmesine izin verir. Bu nedenle, örneğimizde, altbilgi aşağı kaydırır.

Dikey hizalama

CSS yöntemlerinin ortasındaki hizalamayı ayarlamak için yeterli olmadığında, çocuk bloğunun dikey konumunu değiştirmek gerekir. Herhangi bir küçük harf veya süzgeç elemanı, üst veya alt kenara, ebeveyn elemanının ortasında olacak veya keyfi bir yerde olacak şekilde basılabilir. Çoğu zaman merkezin merkezinin hizalanmasını gerektirir, bu, dikey hizalama özelliğini kullanır. Diyelim ki iki blok var, biri diğerine gömülü. Bu durumda, iç ünite düz bir blok elemanıdır (ekran: satır içi blok). Çocuk bloğunu dikey olarak hizalamak için gereklidir:

Üst sınırda hizalama - .Child (dikey hizala: üst);
merkezdeki hizalama - .Child (dikey hizala: orta);
alt sınırda tesviye - .Child (dikey hizalama: alt);

Blok elemanları üzerinde ne metin-hizalama ne de dikey hizalama.

Hizalı bloklarla olası sorunlar

Bazen DIV'nin CSS'nin merkezine hizalanması küçük sorunlara neden olabilir. Örneğin, şamandıra kullanırken: diyelim, üç blok vardır: .First, .Second i.third. İkinci ve üçüncü bloklar ilk olarak yalan söyler. İkinci sınıftaki eleman sol kenara hizalanır ve son blok doğrudur. Hizalamadan sonra, her ikisi de akıştan düştü. Ebeveyn elemanının bir yükseklik verilmezse (örneğin, 30EM), daha sonra kızı blokların yüksekliğinde gerilmeyi bırakacaktır. Bu hatayı önlemek için, "Strut" yı kullanın - Sees.Second i.third. CSS Kodu:

.Second (şamandıra: solda)
.Third (şamandıra: sağda)
.Clearfix (yükseklik: 0; temizle: her ikisi de;)

Psödo sınıfı sıklıkla kullanılır: ardından, bir psödransport oluşturarak bir yere blok döndürmenize izin veren bir yere geri döndürmenize olanak tanır (Conster sınıfı içindeki Div'de. İlk ve İçeriği I.Right):

.Left (Şamandıra: Sol)
.Right (şamandıra: sağda)
.Container: Sonra (İçerik: "; Ekran: Tablo; Temizle: Her ikisi de;)

Yukarıdaki seçenekler, çeşitli varyasyonlar olmasına rağmen en yaygın olanıdır. Deneyler tarafından psödransport oluşturmak için her zaman en kolay ve en uygun yolu bulabilirsiniz.

Versiyonların sık sık karşılaştığı bir başka sorun, süzgeç blok elemanlarının hizalamasıdır. Her birinin ardından bir boşluk otomatik olarak eklenir. Bununla dolaşmak, negatif bir girinti verilen marj özelliğine yardımcı olur. Çok daha az sıklıkla kullanılan başka yöntemler de var: Örneğin, bu durumda ebeveyn elemanının özelliklerinde sıfırlama yazı tipi boyutu: 0. Metin blokların içine yerleştirilirse, istenen yazı tipi boyutu, satır blok elemanlarının özelliklerinde zaten döndürülür. Örneğin, yazı tipi boyutu: 1EM. Yöntem her zaman uygun değildir, bu nedenle dış dönüşlere sahip bir varyant çok daha sık kullanılır.

Blokların hizalaması, güzel ve fonksiyonel sayfalar oluşturmanıza olanak sağlar: Paylaşımlı bir düzenin düzen ve çevrimiçi mağazalardaki malların yerini ve kartvizitlerdeki fotoğrafların bulunduğu yerdir.

Bir web sayfası düzeni oluştururken, muhtemelen DIV'yi yatay olarak ortalamanız gereken bir durumla karşılaştınız ve CSS kullanılarak dikey. CSS ve jQuery kullanmanın birkaç yolu vardır.

Ancak kuruluşun başında:

CSS ile yatay tesviye

Sınıf adı (
Marj: 0 Otomatik;
Genişlik: 200px;
Yükseklik: 200px;
}

DIV'yi sadece yatay olarak ortadan kaldırmak için, sol ve sağ kenar boşlukları için genişlik ve otomatik değeri belirtmelisiniz (bu, Kısaltılmış bir yazma, CSS özelliklerinin kısaltılmış bir şeklidir). Bu yöntem blok elemanları üzerinde çalışır (DIV, P, H1 vb.). Doğrusal elemanlara (örneğin, köprü ve görüntüler) için uygulamak için başka bir kural yazmanız gerekir - ekran: blok.

Yatay ve dikey hizalama CSS anlamına gelir

Div'in eşzamanlı merkezlenmesi yatay ve dikey olarak biraz daha fazla kurnaz. İV boyutlarını önceden bilmeniz gerekir.

Sınıf adı (
Genişlik: 300px;
Yükseklik: 200px;
Konum: Mutlak;
Sol:% 50;
Üst:% 50;
Marj: -100px 0 0 -150px;
}

Elementlerin mutlak konumlandırılmasını kullanarak, akıştan çıkarabiliriz ve tarayıcı penceresine göre konumunu ayarlayabiliriz. DIV ofsetini pencerenin solundaki ve üst kısmının% 50'sini ayarlayarak, sol üst köşeyi sayfaya göre ortalıyoruz. Yapılacak tek şey, DIV'yi genişlikte ve yüksekliğinin yarısını sola ve yukarı kaydırmak, marjın negatif değerlerini ortada mükemmel bir şekilde yerleştirilmiştir.

JQuery kullanarak yatay ve dikey hizalama

Daha önce de belirtildiği gibi, yukarıdaki CSS yöntemi sadece bir DIV sabit boyutu ile çalışır. JQuery kurtarmaya geliyor:

// duyuru fonksiyonları:
$ (Pencere) .Resize (işlev () (
$ (". Sınıf adı"). CSS (((((
Pozisyon: "Mutlak",
Sol: ($ (pencere) .Width () - $ (". Sınıf adı"). Dışarısı ()) / 2,
Top: ($ (pencere) .height () - $ (". Sınıf adı"). Outerheight ()) / 2
});
});
// Arama fonksiyonları:
$ (Pencere) .Resize ();

İşlev, pencerenin genişliğini $ (pencere) olarak hesaplar. Kullanıcı boyutu her kullanıcıyı her değiştirdiğinde her seferinde (). Dışarısı () ve outerheight (), çünkü normal genişliğin () ve yüksekliğin () 'nin aksine, boyutunu döndürerek dolgu ve kenarlık genişliğini eklerler. Son olarak, pencerenin boyutunu değiştirirken uyarlanır ve sayfayı yeniden başlatırken DIV'yi ortadan kaldırırız.

CSS'de, bazıları ilk bakışta, basit şeyler yapılması o kadar kolay olmadığı ortaya çıktı. Bu şeylerden biri hizalamadır, yani. Bir eleman kesinlikle göreceli bir diğerine yerleştirildiğinde.

Bu makale, elemanların yatay olarak ve (veya) dikey olarak merkezlenmesi üzerindeki çalışmayı basitleştirmeye yardımcı olacak bazı hazır çözümler sunar.

Not: Her çözüm altında, belirtilen CSS kodunun çalıştığı sürümleri belirten tarayıcıların listesi.

CSS - merkezdeki hizalamayı engelle

1. Bir bloğun diğerinin merkezinde hizalanması. Bu durumda, birinci ve ikinci blok dinamik boyutlara sahiptir.

...

Ebeveyn (konum: göreceli;) .Child:% 50; üst: 50%; -Webkit-Transform: tercüme (-50, -50); -moz-dönüşüm: tercüme (-50% -50); -MS-Dönüştür: tercüme (-50, -50%); -O-dönüşüm: tercüme (-50, -50%); dönüşüm: tercüme (-50% -50);)

Chrome 4.0+.
Firefox 3.6+
Internet Explorer. 9+
Opera 10.5+
Safari 3.1+

2. Bir bloğun diğerinin merkezinde hizalanması. Bu durumda, ikinci birim sabit boyutlara sahiptir.

Ebeveyn (konum: mutlak; sol:% 50; üst:% 50; / * genişlik ve yükseklik 2 blok * / genişlik: 500px; yükseklik: 250px; / * değerleri boyutuna bağlı olarak * / * marjı sola \u003d - Genişlik / 2 * / Marj-sol: -250px; / * marj-top \u003d - yükseklik / 2 * / marj üstü: -125px;)