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 hizalamasını ayarlamanız gerekirse, CSS oldukça uygun bir yol sunabilir: Harici girintiler kenar boşluğunu 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.

Yazardan: Yine Blogumuzun sayfalarında sizi karşıladım. Günümüzün makalesinde, hem bloklara hem de içeriklerinde kullanılabilecek çeşitli tesviye tekniklerinden bahsetmek istiyorum. Özellikle, CSS'deki blokları nasıl hizalanır ve metni hizalamak için.

Merkezdeki blokların hizalanması

CSS'de, bloğu merkezdeki hizalayın kolaydır. Bu en ünlü kabul, ama şimdiden önce, her şeyden önce anlatmak istiyorum. Burada, merkezi ana elemana göre yatay olarak hizalamak içindir. Nasıl yapılır? Diyelim ki bir konteynerimiz var ve deneyimimizde:

< div id = "wrapper" > < div id = "header" > < / div > < / div >

Bunun koltuk şapkası olduğunu varsayalım. Pencerenin genişliğinde gerdirmez ve onu tekrarlamamız gerekir. Gibi yazıyoruz:

#Header ( genişlik / maksimum genişlik: 800px; marj: 0 Otomatik;

Doğru veya maksimum genişlik belirlememiz gerekiyor, daha sonra bir anahtar özelliği yazıyorsunuz - Marj: 0 Otomatik. Kapağımızın harici girdileri belirtir, ilk değer yukarıdaki ve alttan girintileri belirler ve ikincisi sağda ve solda. Otomatik değer, tarayıcı komutunu, her iki taraftaki girintileri otomatik olarak hesaplamak için verir, böylece elemanın tam olarak ebeveynin ortasındadır. Elverişli!

Tesviye metni

Bu aynı zamanda çok basit bir tekniktir. Tüm küçük harf elemanları hizalamak için, Metin Hizası özelliğini ve değerlerini kullanabilirsiniz: sol, sağ, orta. Son merkezlere ihtiyacımız olan metni. Aynı şekilde, resmi hizalayabilirsiniz, çünkü aynı zamanda varsayılan öğe dedir.

Tesviye metin dikey

Ancak bu zaten daha karmaşık. Varsayılan olarak, bir blok kabın içindeki bir blok kabındaki metni dikey olarak ortalanacak kadar basit tanınmış bir özellik yoktur. Bununla birlikte, iş yılları boyunca sürümlerle sonuçlanan çeşitli teknikler vardır.

Bloğun yüksekliğini iç girintilerin yardımıyla ayarlayın. Yöntem, yüksekliği ile açık bir yükseklik belirtmek ve yapay olarak paddding üstleri ve aşağıdan aynı olmalıdır. Herhangi bir blok oluşturun ve bu gibi özellikleri yazın:

div (arka plan: #ccc; dolgu: 30px 0;)

div ( arka plan: #ccc; dolgu: 30px 0;

Arka plan, iç girintilerin yanı sıra kenarları görsel olarak görmek içindir. Şimdi bloğun yüksekliği bu kibir ve hattın ikisidir ve şöyle görünür:

Hat-yükseklik bloğunu belirleyin. Metnin bir satırını hizalamanız gerekiyorsa, daha doğru bir yol olduğunu düşünüyor. Bununla birlikte, yükseklik özelliklerini kullanarak normalin yüksekliğini kaydedebilirsiniz. Bundan sonra, çizginin yüksekliğini sorması gerekiyor, bir bütün olarak bloğun yüksekliği ile aynı.

div (yükseklik: 60px; çizgi boyu: 60px;)

div ( yükseklik: 60px; hat - Yükseklik: 60px;

Sonuç, yukarıdaki resme benzer olacaktır. Dahili girintileri eksen bile, her şey işe yarayacaktır. Ancak, sadece bir satır için. Öğede daha fazla metne ihtiyacınız varsa, bu yöntem çalışmaz.

Bloğu masa hücresine dönüştürün. Bu yöntemin özü, dikey align özelliğinin tablo hücresi için geçerli olmasıdır: orta, elemanı dikey olarak ortadan kaldırır. Buna göre, bu durumda, blok aşağıdaki şekilde ayarlanmalıdır:

dIV (Ekran: Tablo-hücre; dikey hizalama: orta;)

div ( ekran: Tablo - hücre; dikey - Hizala: Orta;

Bu yöntem iyidir, çünkü merkezde ne kadar metin hizalayabilirsiniz. Ancak, DIV'nin yatırıldığı blok, ekranı kaydetmek daha iyidir: Tablo, aksi takdirde çalışmayabilir.

Bugün ikincisine geldik, bu dikey blokların kendilerini hizalamasıdır. Bunun için özellikle bunun için olacağı bir özellik olmadığı söylenmesi gerekir, ancak bilmeniz gereken birkaç teknik vardır.

Girintileri yüzde olarak ayarlayın. Ebeveyn öğesinin yüksekliğini biliyorsanız ve içine başka bir blok elemanı koyarsanız, yüzde girintileri kullanmayı netleştirmek mümkündür. Örneğin, ebeveynin 600 piksel yüksekliğe sahiptir. 300 piksel yüksekliğe sahip olan bir blok koyarsınız. Netleştirmek için yukarıdan ve alttan ne kadar geri çekilmeniz gerekiyor? 150 piksel ve bu, ebeveynin yüksekliğinin% 25'idir.

Bu yöntem, ortamı yalnızca boyutlar hesaplamalar yapmanıza izin verdiğinde yapmanızı sağlar. Ve eğer 887 piksel yüksekliğinde bir ebeveyniniz varsa, o zaman kesin olarak çalışmaz, aynı zamanda açıktır.

Öğeyi masa hücresine yerleştirin. Yine, ebeveyn öğesini bir tablonun bir tablosuna dönüştürürsek, içine yerleştirilmiş blok dikey olarak ortalanır. Bunu yapmak için, ebeveynin sadece dikey hizala belirtmesi için gereklidir: orta.

Ve buna buna ve marjı da yazarsanız: 0 Otomatik, öğe ve yatay merkezde olacak!

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, bu özelliğin harici elemana kullanımı 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//

Bu çözeltinin bariz eksi, anlamı açısından hizalama için tabloları yanlış uygular. İ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/

Bu yöntemin eksi, dış 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:

1. dış bloğu göreceli konumlandırmayı ve içsel - mutlak;
2. Üstün iç bloğunu ekleyin: 0 ve alt: 0, bunun sonucunda dış bloğun tüm yüksekliğine uzanır;
3. İç ü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, hemen hemen her şeye sahip, sayfadaki öğelerin konumlandırılmasını esnek bir şekilde kontrol etmenizi 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

Elemanları yatay ve dikey hizalama çeşitli şekillerde yapılabilir. Yöntem seçimi, konumlandırma tipinde, boyutları, vb.

1. Yatay Seviye Hizalama Bloğu / Sayfa

1.1. Genişlik blok için ayarlanmışsa:

DIV (genişlik: 300px; marjı: 0 Otomatik; / * Elemanı ana bloğun içinde yatay olarak ortalayın * /)

Küçük harf elemanı bu şekilde hizalamanız gerekirse, ekran ayarlaması gerekir: blok;

1.2. Ünite başka bir bloğa takılırsa ve genişlik bunun için belirtilmemişse:

.WRAPPER (Metin Hizası: Merkez;)

1.3. Genişlik blok için ayarlanmışsa ve ana ünitenin ortasına sabitlenmesi gerekirse:

.wrapper (Konum: Göreceli; / * Ebeveyn bloğunun içinden sonra bloğu yerleştirmesi için göreceli konumlandırmayı belirtiriz * /) .box (genişlik: 400px; pozisyon: mutlak; sol:% 50; kenar boşluğu: -200px ; / * Üniteyi, genişliğinin yarısına eşit bir mesafeden sola kaydırın * /)

1.4. Bloklar için genişlik belirtilmezse, ebeveyn sarma bloğu kullanılarak ortalanabilir:

.WRAPPER (Metin Hizası: Merkez; / * Merkezin bir blok içeriğine sahibiz. * /). / * Bloklar arasındaki doğru girintiyi kaldırın * /)

2. dikey hizalama

2.1. Metin bir satır alırsa, örneğin, düğmeler ve menü öğeleri için:

.button (Yükseklik: 50px; Hat Yüksekliği: 50px;)

2.2. Bloğu ana bloğun içinde dikey olarak hizalamak için:

.WRAPPER (pozisyon: göreceli;) .box (yükseklik: 100px; pozisyon: mutlak; üst: 50%; marj: -50px 0 0 0;)

2.3. Tablo türüne göre dikey hizalama:

.wrapper (Ekran: Tablo; Genişlik:% 100;) .box (Ekran: Tablo-Hücre; Yükseklik: 100px; Metin Hizası: Merkez; Dikey Hizala: Orta;)

2.4. Blok blok için genişlik ve yükseklik ise ve ebeveyn ünitesinin ortasına hizalanmalıdır:

.WRAPPER (pozisyon: göreceli;) .box (yükseklik: 100px; genişlik: 100px; pozisyon: mutlak; üst: 0; sağ: 0; alt: 0; sol: 0; marjı: Otomatik, taşma: Otomatik; / * İçerik yayılmadı * /)

2.5. Sayfanın ortasındaki mutlak konumlandırma / CSS3 dönüşümü ile blok:

Öğe belirtilirse

DIV (Genişlik: 300px; / * Blok Genişliğini Set * / Yükseklik: 100px; / * Bloğun yüksekliğini ayarlayın * / Dönüştürme: tercüme (-50, -50%); pozisyon: mutlak; üst: 50%; sol :% 50;)

Öğe belirtilmemişse ve boş değilse

H1 (Marj: 0; Dönüşüm: Çevir (-50%, -50); Konum: Mutlak; Üst:% 50; Sol:% 50;)

Çok sık düzende yatay eleman ve / veya dikey olarak merkezlemeniz gerekir. Bu nedenle, çeşitli merkezleme yöntemleriyle bir makale yapmaya karar verdim, böylece her şey bir yerde elinizdedir.

Yatay hizalama

marj: Oto.

Marj kullanarak yatay hizalama, merkezlenebilir öğenin iyi bilinen bir genişliğinde kullanılır. Blok elemanları için çalışır:

Elem (Marj-Sol: Otomatik; Marj-sağ: Otomatik; Genişlik:% 50;)

Sağ ve sol emeklilik otomobilinin değerlerinin belirlenmesi, elemanı üst bloğun içinde yatay olarak merkezleyen, bunları eşit hale getirir.

metin Hizası: Merkez

Bu yöntem, blok içindeki metnin ortasındaki hizalama için uygundur. Metin Hizası: Merkez:

konum ve negatif marj sol

Bilinen bir genişliğin merkezlenebilir blokları için uygundur. Ebeveyn blok pozisyonundan soruyoruz: Buna göre konumlandırmaya göre, merkezi bir eleman pozisyonu: mutlak, sol:% 50 ve değeri elemanın genişliğinin yarısı kadar olan% 50 ve negatif kenar boşluğu:

ekran: Inline-Block + Metin-Hizala: Merkez

Yöntem, bilinmeyen genişlik blokları hizalamak için uygundur, ancak bir ebeveyn sargısı gerektirir. Örneğin, bu şekilde yatay menü merkezlenebilir:

• ana
• yazar hakkında

Dikey hizalama

satır yüksekliği

Metnin bir satırını hizalamak için, ana blok için aynı yükseklik ve aralık değerlerini kullanabilirsiniz. Düğmeler, menü öğeleri vb. İçin uygundur.

pozisyon ve negatif marj

Öğe, sabit bir yükseklik ayarlanarak ve uygulama pozisyonunu ayarlayarak dikey olarak hizalanabilir: hizalı elemanın yüksekliğinin yarısına eşit, mutlak ve negatif kenar boşluğu. Ebeveyn bloğu görevlendirilmelidir: Göreceli:

Sarmalayıcı (pozisyon: göreceli;) Elem (yükseklik: 200px; marjı: -100px 0 0; pozisyon: mutlak; üst: 50%;)

Böylece, konumlandırma ve negatif alanları kullanarak, sayfadaki öğeyi ortalayabilirsiniz.

ekran: Tablo-hücre

Dikey hizalama için, ekran özelliği uygulanır: Tablo hücresinin taklit etmesine neden olan tablo hücresi elemanı. Yükseklik ve dikey hizalama sordum: orta. Bütün bunlar, Dislpay ile bir kaba dönüşecektir: tablo özelliği; :

Dinamik eleman sayfada hizalama

CSS kullanarak sayfadaki öğeleri hizalamak için yollar gözden geçirdik. Şimdi jquery ile seçeneğin uygulanmasına bir göz atın.

JQuery'i sayfaya bağlayın:

Sayfadaki öğenin basit bir merkezleme özelliğini yazmayı öneriyorum, hadi AlignCenter () diyelim. Bir tartışma olarak, işlevin kendisi unsurdur:

İşlev AnignCenter (Elem) (// kodu buraya)

İşlevin gövdesinde dinamik olarak hesaplanır ve sayfa merkezi özelliklerinin koordinatlarını Sol ve üst:

İşlev AlignCenter (Elem) (Elem.css ((sol: ($ (pencere) .Width () - elem.Width ()) / 2 + "px", üst: ($ (pencere) .height () - Elem. Yükseklik ()) / 2 + "px" // Konumunu eklemeyi unutmayın: Koordinatları tetiklemek için mutlak eleman))))

İşlevin ilk satırında, belgenin genişliğini alır ve elemanın genişliğini alırız, yarı yarıya bölünür - bu, sayfanın yatay olarak merkezi olacaktır. İkinci dizge aynı, sadece bir yükseklikte dikey tesviye için yapar.

Fuccution hazır, DOM ve REZAYZ pencerelerinin hazırlığının olayları üzerinde asmak için kalır:

$ (işlev () (// DOM aligncenter hazır olduğunda (Elem) (Elem) (Elem) (Elem) 'nin bir fonksiyonunu çağırmak için bir merkezleme işlevini çağırmak; // resquide penceresinde (pencerede) bir fonksiyon çağırın (işlev () () (AlignCenter (Elem));) // fonksiyonu AlignCenter Element Center (Elem) (Elem) (Elem.css ((// sol ve üst sol koordinatların hesaplanması: ($ (pencere) .Width () - elem.Width ()) / 2 + "px", üst: ($ (Pencere) .height () - elem.height ()) / 2 + "px"))))))

FlexBox uygulaması

Yavaş yavaş, CSS3'ün yeni yetenekleri, FlexBox gibi günlük yaşamları kademeli olarak giriyor. Teknoloji, yüzme, konumlandırma vb. Kullanmadan işaretleme oluşturmaya yardımcı olur. Merkezleme elemanları için kullanılabilir. Örneğin, ebeveyn elemanı için geçerli FlexBox.WRAPPER ve içeriği ortadan kaldırmak için:

Sarıcı (Ekran: -Webkit-Box; Ekran: -Moz-Box; Ekran: -MS-FlexBox; Ekran: -Webkit-Flex; Ekran: Flex; Yükseklik: 500px; Genişlik: 500px;) .Wrapper .Content (Margin: Otomatik; / * marjı: 0 Otomatik; yatay olarak sadece * / * marjı: Otomatik 0; Sadece dikey * /)

Bu kural yatay elemanı merkezler ve dikey olarak aynı anda - Marj şimdi sadece yatay hizalama için değil, aynı zamanda dikey için de çalışıyor. Ayrıca, iyi bilinen bir genişlik / yükseklik olmadan.

Konudaki Kaynaklar

Yardım Projesi