Elemanların yatay ve dikey olarak hizalanması yapılabilir Farklı yollar... Yöntem seçimi, eleman tipine (blok veya satır içi), konumlandırma tipine, boyutlara vb. bağlıdır.

1. Blok / sayfanın ortasına yatay hizalama

1.1. Blok bir genişliğe sahipse:

div (genişlik: 300 piksel; kenar boşluğu: 0 otomatik; / * öğeyi üst blok içinde yatay olarak ortalayın * /)

Bir satır içi öğeyi bu şekilde hizalamak istiyorsanız, bunun display:block;

1.2. Blok başka bir blokta yuvalanmışsa ve bunun için genişlik ayarlanmamışsa/ayarlanmamışsa:

.wrapper (metin hizalama: orta;)

1.3. Blok bir genişliğe sahipse ve ana bloğun merkezine sabitlenmesi gerekiyorsa:

.wrapper (konum: göreceli; / * üst kutunun göreli konumunu ayarlayın, böylece daha sonra kutuyu kesinlikle onun içine yerleştirebiliriz * /) .box (genişlik: 400 piksel; konum: mutlak; sol: %50; kenar boşluğu- sol: -200px; / * bloğu genişliğinin yarısı kadar sola kaydır * /)

1.4. Bloklar için genişlik belirtilmemişse, üst sarmalayıcı bloğu kullanarak ortalayabilirsiniz:

.wrapper (metin hizalama: merkez; / * bloğun içeriğini merkeze yerleştirin * /) .box (ekran: satır içi blok; / * blokları yatay olarak sıralayın * / sağ kenar boşluğu: -0.25em ; / * bloklar arasındaki sağ girintiyi kaldırın * /)

2. Dikey hizalama

2.1. Metin, örneğin düğmeler ve menü öğeleri için bir satıra yayılıyorsa:

.button (yükseklik: 50 piksel; satır yüksekliği: 50 piksel;)

2.2. Bir üst blok içinde bir bloğu dikey olarak hizalamak için:

.wrapper (konum: göreli;) .box (yükseklik: 100 piksel; konum: mutlak; üst: %50; kenar boşluğu: -50 piksel 0 0 0;)

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

.wrapper (ekran: tablo; genişlik: %100;) .box (ekran: tablo hücresi; yükseklik: 100 piksel; metin hizalama: merkez; dikey hizalama: orta;)

2.4. Bir bloğun genişliği ve yüksekliği varsa ve ana blokta ortalanması gerekiyorsa:

.wrapper (konum: göreceli;) .box (yükseklik: 100 piksel; genişlik: 100 piksel; konum: mutlak; üst: 0; sağ: 0; alt: 0; sol: 0; kenar boşluğu: otomatik; taşma: otomatik; / * ile içerik sürünmedi * /)

2.5. CSS3 dönüşümü kullanılarak sayfanın / bloğun ortasında mutlak konumlandırma:

eleman boyutlandırılmışsa

div (genişlik: 300 piksel; / * blok genişliğini ayarlayın * / yükseklik: 100 piksel; / * blok yüksekliğini ayarlayın * / transform: translate (-50%, -%50); konum: mutlak; üst: %50; sol: %50 ;)

eleman boyutlandırılmamışsa ve boş değilse

h1 (kenar boşluğu: 0; dönüştürme: çevir (-50%, -%50); konum: mutlak; üst: %50; sol: %50;)

CSS,

HTML

Sanırım düzeni yapan birçoğunuz, öğeleri dikey olarak hizalama ihtiyacıyla karşılaştınız ve bir öğeyi merkeze hizalarken hangi zorlukların ortaya çıktığını biliyorsunuz.

evet, için dikey hizalama CSS, birden çok değerle dikey hizalama adı verilen özel bir özelliğe sahiptir. Ancak pratikte hiç de beklendiği gibi çalışmıyor. Anlamaya çalışalım.

Aşağıdaki yaklaşımları karşılaştıralım. Şununla hizala:

• tablolar,
• girintiler,
• satır yüksekliği,
• germe,
• negatif marj,
• dönüştürmek,
• sözde eleman,
• esnek kutu.

Bir örnek olarak, aşağıdaki örneği göz önünde bulundurun.

Biri diğerinin içine yerleştirilmiş iki div vardır. Onlara karşılık gelen sınıfları verelim - dış ve iç.

Buradaki zorluk, iç elemanı dış elemanın merkezine hizalamaktır.

İlk olarak, dış ve iç ünitelerin boyutlarının bilinen... İç öğeye display: inline-block ve dış öğeye text-align: center ve vertical-align: Middle'ı ekleyelim.

Hizalamanın yalnızca satır içi veya satır içi blok görüntüleme modu olan öğeler için geçerli olduğunu hatırlıyorum.

Kenarlarını görmek için blok boyutlarını ve arka plan renklerini verelim.

Dış (genişlik: 200 piksel; yükseklik: 200 piksel; metin hizalama: merkez; dikey hizalama: orta; arka plan rengi: #ffc;) .inner (ekran: satır içi blok; genişlik: 100 piksel; yükseklik: 100 piksel; arka plan rengi : #fcc ;)
Stilleri uyguladıktan sonra göreceğiz ki iç ünite yatay olarak hizalanmış, ancak dikey olarak hizalanmamıştır:
http://jsfiddle.net/c1bgfffq/

Neden oldu? Buradaki nokta, dikey hizalama özelliğinin hizalamayı etkilemesidir. öğenin kendisi, içeriği değil(tablo hücreleri için geçerli olduğu durumlar hariç). Bu nedenle, bu özelliğin uygulanması dış eleman hiçbir şey vermedi. Ayrıca, bu özelliği bir iç elemana uygulamak da hiçbir şey yapmaz, çünkü satır içi bloklar bitişik bloklara göre dikey olarak hizalanır ve bizim durumumuzda bir satır içi bloğumuz vardır.

Bu sorunu çözmek için birkaç teknik var. Aşağıda her birine daha yakından bakacağız.

Bir tabloyla hizalayın

Akla gelen ilk çözüm, dış bloğu tek hücreli bir masa ile değiştirmek. Bu durumda hizalama hücrenin içeriğine yani iç bloğa uygulanacaktır.

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

bariz bir dezavantaj bu karar- anlambilim açısından, hizalama için tabloları kullanmak yanlıştır. İkinci dezavantaj, tabloyu oluşturmak için dış bloğun etrafına başka bir eleman eklemeniz gerektiğidir.

İlk eksi, tablo ve td etiketlerini div ile değiştirerek ve CSS'de tablo görüntüleme modunu ayarlayarak kısmen kaldırılabilir.

.outer-wrapper (ekran: tablo;) .outer (ekran: tablo hücresi;)
Bununla birlikte, dış blok, takip eden tüm sonuçları olan bir masa olmaya devam edecektir.

Girintilerle hizala

İç ve dış kutuların yükseklikleri biliniyorsa, hizalama, aşağıdaki formül kullanılarak iç kutunun dikey dolgusu kullanılarak ayarlanabilir: (H dış - H iç) / 2.

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

Çözümün dezavantajı, her iki bloğun yüksekliklerinin bilindiği durumlarda sınırlı sayıda uygulanabilir olmasıdır.

Satır yüksekliği ile hizalama

İç bloğun birden fazla metin satırı içermemesi gerektiğini biliyorsanız, line-height özelliğini kullanabilir ve dış bloğun yüksekliğine eşitleyebilirsiniz. İç bloğun içeriği ikinci satıra kaydırılmaması gerektiğinden, beyaz boşluk: nowrap ve taşma: gizli kuralların da eklenmesi önerilir.

Dış (yükseklik: 200 piksel; satır yüksekliği: 200 piksel;) .inner (beyaz boşluk: nowrap; taşma: gizli;)
http://jsfiddle.net/c1bgfffq/12/

Bu tekniği, iç blok için satır yüksekliği değerini yeniden tanımlayarak ve görüntü: satır içi blok ve dikey hizalama: orta kurallar ekleyerek çok satırlı metni hizalamak için de kullanabilirsiniz.

Dış (yükseklik: 200 piksel; satır yüksekliği: 200 piksel;) .inner (satır yüksekliği: normal; görüntü: satır içi blok; dikey hizalama: orta;)
http://jsfiddle.net/c1bgfffq/15/

Bu yöntemin dezavantajı, dış bloğun yüksekliğinin bilinmesi gerektiğidir.

Streç hizalama

Bu method dış ünitenin yüksekliğinin bilinmediği ancak iç ünitenin yüksekliğinin bilindiği durumlarda kullanılabilir.

Bunun için ihtiyacınız olan:

1. dış blok göreli konumlandırmayı ve iç bloğu - mutlak olarak ayarlayın;
2. üst: 0 ve alt: 0 kurallarını iç bloğa ekleyin, bunun sonucunda dış bloğun tam yüksekliğine kadar uzanır;
3. iç bloğun dikey dolgusu için otomatik olarak ayarlayın.

.outer (konum: göreceli;) .inner (yükseklik: 100 piksel; konum: mutlak; üst: 0; alt: 0; kenar boşluğu: otomatik 0;)
http://jsfiddle.net/c1bgfffq/4/

Bu tekniğin özü, uzatılmış ve kesinlikle konumlandırılmış bir kutunun yüksekliğini belirtmenin, otomatik olarak ayarlandığında tarayıcıyı dikey kenar boşluklarını eşit oranlarda hesaplamaya zorlamasıdır.

Negatif kenar boşluğu ile hizalama

Bu yöntem yaygın olarak bilinir ve çok sık kullanılır. Bir önceki gibi, dış bloğun yüksekliği bilinmediğinde, ancak iç bloğun yüksekliği bilindiğinde uygulanır.

Dış blok göreli konumlandırmayı ve iç bloğu - mutlak olarak ayarlamanız gerekir. Ardından, iç kutuyu, dış kutunun üst kısmının yüksekliğinin yarısı kadar aşağı itmeniz gerekir: %50 ve kendi yüksekliğinin yarısı kadar yukarı kaldırmanız gerekir. -H iç / 2.

Dış (konum: göreli;) .inner (yükseklik: 100 piksel; konum: mutlak; üst: %50; kenar boşluğu: -50 piksel;)
http://jsfiddle.net/c1bgfffq/13/

Bu yöntemin dezavantajı, iç ünitenin yüksekliğinin bilinmesi gerektiğidir.

Dönüşümle hizalama

Bu yöntem bir öncekine benzer ancak iç ünitenin yüksekliği bilinmediğinde uygulanabilir. Bu durumda, bir negatif piksel dolgusu ayarlamak yerine transform özelliğini kullanabilir ve translateY işlevini ve -%50 değerini kullanarak iç bloğu yukarı taşıyabilirsiniz.

Dış (konum: göreli;) .inner (konum: mutlak; üst: %50; dönüştürme: çevirY (-50%);)
http://jsfiddle.net/c1bgfffq/9/

Önceki yöntemde neden bir yüzde ayarlanamadı? Marjin özelliğinin yüzde değerleri ana elemana göre hesaplandığı için %50 değeri dış kutunun yüksekliğinin yarısı olur ve iç kutuyu kendi yüksekliğinin yarısı kadar yükseltmemiz gerekiyordu. transform özelliği tam da bunun için uygundur.

Bu yöntemin dezavantajı, dahili bloğun mutlak konumlandırmaya sahip olması durumunda uygulanamamasıdır.

Flexbox ile hizalayın

Dikey olarak hizalamanın en modern yolu, Esnek Kutu Düzeni (popüler olarak Flexbox olarak bilinir) kullanmaktır. Bu modül, öğelerin sayfadaki konumlarını esnek bir şekilde kontrol etmenizi ve onları neredeyse istediğiniz gibi yerleştirmenizi sağlar. Flexbox için merkez hizalama çok basit bir iştir.

Dış kutunun görüntülenecek şekilde ayarlanması gerekir: esnek ve iç kutunun kenar boşluğu: otomatik olarak ayarlanması gerekir. Ve hepsi bu! Güzel. Değil mi?

Dış (ekran: esnek; genişlik: 200 piksel; yükseklik: 200 piksel;) .inner (genişlik: 100 piksel; kenar boşluğu: otomatik;)
http://jsfiddle.net/c1bgfffq/14/

Bu yöntemin dezavantajı, Flexbox'ın yalnızca modern tarayıcılar tarafından desteklenmesidir.

Hangi yolu seçmeli?

Sorunun ifadesinden devam etmek gerekir:

• Metnin dikey hizalaması için dikey dolgu veya satır yüksekliği özelliğini kullanmak daha iyidir.
• Bilinen bir yüksekliğe sahip (simgeler gibi) mutlak olarak konumlandırılmış öğeler için, negatif margin-top özelliği idealdir.
• Daha karmaşık durumlar için, bloğun yüksekliği bilinmediğinde, bir sözde eleman veya transform özelliği kullanmanız gerekir.
• IE'nin eski sürümlerini desteklemeniz gerekmeyecek kadar şanslıysanız, o zaman elbette Flexbox kullanmak daha iyidir.

Çoğu zaman görev, bloğu sayfanın / ekranın ortasına hizalamaktır ve hatta bir Java komut dosyası olmadan, sabit boyutlar veya negatif kenar boşlukları ayarlamadan, böylece blok boyutunu aşarsa kaydırma çubukları ebeveyn için çalışacaktır. . Web'de bir bloğun ekranın ortasına nasıl hizalanacağına dair birçok monoton örnek var. Kural olarak, çoğu aynı ilkelere dayanmaktadır.

Aşağıda sorunu çözmenin ana yolları, artıları ve eksileri bulunmaktadır. Örneklerin özünü anlamak için, belirtilen bağlantılardaki örneklerde Sonuç penceresinin yüksekliğini/genişliğini azaltmanızı tavsiye ederim.

Seçenek 1. Negatif girinti.

konumlandırma engellemek%50 üst ve sol öznitelikler ve bloğun yüksekliğini ve genişliğini önceden bilerek, boyutun yarısına eşit bir negatif kenar boşluğu belirledik engellemek... Büyük bir dezavantaj bu seçenek negatif marjları saymanız gerektiğidir. Aynı şekilde engellemek kaydırma çubuklarıyla çevrelendiğinde tam olarak doğru davranmaz - negatif kenar boşluklarına sahip olduğu için basitçe kesilir.

Üst (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: -125px 0 0 -125px; img (maksimum genişlik: %100; yükseklik: otomatik; görüntü: blok; kenar boşluğu: 0 otomatik; kenarlık: yok;))

Seçenek 2. Otomatik girinti.

Daha az yaygın, ancak birincisine benzer. İçin engellemek genişliği ve yüksekliği ayarlayın, sağ üst alt sol öznitelikleri 0 olarak konumlandırın ve marjı otomatik olarak 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.

Üst (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 engellemek satır bloğu modelini ayarlayın. Aldığımız eksiler, çalışan kaydırma çubukları değil ve genel olarak tablonun "öykünmesinin" estetiği değil.

Üst (genişlik: %100; yükseklik: %100; görüntü: tablo; konum: mutlak; üst: 0; sol: 0;> .inner (görüntü: tablo-hücre; metin hizalama: merkez; dikey hizalama: orta; )) .block (görüntü: satır içi blok; img (görüntü: blok; kenarlık: yok;))

Bu örneğe bir kaydırma eklemek için yapıya bir öğe daha eklemeniz gerekecek.
Örnek: jsfiddle.net/serdidg/fk5nqh52/3.

Seçenek 4. Sözde öğe.

Bu seçenek, önceki yöntemlerde listelenen tüm sorunlardan yoksundur ve ayrıca orijinal olarak ayarlanmış görevleri de çözer. Sonuç şu ki ebeveyn stilleri ayarla sözde elemanönce, yani %100 yükseklik, merkez hizalama ve satır içi kutu modeli. ile aynı engellemekçizgi bloğunun modeli ayarlanır, merkez hizalama. İle engellemek altına "düşmedi" sözde eleman birincinin boyutu şundan büyük olduğunda ebeveyn, belirtmek ebeveyn boşluk: şimdi rap ve yazı tipi boyutu: 0 ve ardından engellemek bu stilleri aşağıdakiyle geçersiz kılın - boşluk: normal. V bu örnek font-size: arasında oluşan boşluğu kaldırmak için 0 gereklidir ebeveyn ve engellemek kodun biçimlendirilmesi ile bağlantılı olarak. Boşluk başka şekillerde kaldırılabilir, ancak en iyisi buna izin vermemektir.

Üst (genişlik: %100; yükseklik: %100; konum: mutlak; üst: 0; sol: 0; taşma: otomatik; beyaz boşluk: şimdi rap; metin hizalama: merkez; yazı tipi boyutu: 0; &: önce ( yükseklik: %100; görüntü: satır içi blok; dikey hizalama: orta; içerik: "";)) .block (ekran: satır içi blok; beyaz boşluk: normal; dikey hizalama: orta; metin hizalama: sola ; img (ekran: blok; kenarlık: yok;))

Veya, üst öğenin tüm sayfayı değil, yalnızca pencerenin yüksekliğini ve genişliğini işgal etmesine ihtiyacınız varsa:

Üst (konum: sabit; üst: 0; sağ: 0; alt: 0; sol: 0; taşma: otomatik; beyaz boşluk: nowrap; metin hizalama: merkez; yazı tipi boyutu: 0; &: önce (yükseklik: %100; görüntüleme: satır içi blok; dikey hizalama: orta; içerik: "";)) .block (görüntü: satır içi blok; beyaz boşluk: normal; dikey hizalama: orta; metin hizalama: sola; img (ekran: blok; kenarlık: yok;))

Seçenek 5. Flexbox.

En basit ve en zarif yollardan biri flexbox kullanmaktır. Gereksiz vücut hareketlerine ihtiyaç duymaz, olup bitenlerin özünü oldukça net bir şekilde tanımlar, yüksek esnekliğe sahiptir. Bu yöntemi seçerken hatırlamaya değer tek şey, sürüm 10 dahil IE desteğidir. caniuse.com/#feat=flexbox

Üst (genişlik: %100; yükseklik: %100; konum: sabit; üst: 0; sol: 0; ekran: esnek; öğeleri hizalama: merkez; içeriği hizalama: merkez; yaslama içeriği: 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 ve ana öğeyi manipüle etmenin bir yolu yoksa ve bloğun bir şekilde hizalanması gerekiyorsa uygundur. translate () css işlevi kurtarmaya gelir. %50'de, mutlak konumlandırma kutunun sol üst köşesini tam olarak merkeze yerleştirecek, ardından negatif bir çevirme değeri kutuyu kendi boyutlarına göre hareket ettirecektir. Negatif etkilerin bulanık kenarlar veya yazı tipi stili şeklinde görünebileceğini unutmayın. Ayrıca, bu yol, java-script "a kullanılarak bloğun konumunun hesaplanmasında sorunlara yol açabilir. Bazen nedeniyle genişliğin %50'lik kaybını telafi etmek için css kullanarak sol özelliklere, blok için ayarlanan kural yardımcı olabilir: kenar-sağ: -%50; ...

Üst (genişlik: %100; yükseklik: %100; konum: sabit; üst: 0; sol: 0; taşma: otomatik;) .block (konum: mutlak; üst: %50; sol: %50; dönüştürme: çevir ( -%50, -%50); img (görüntüleme: blok;))

Seçenek 7. Düğme.

Kullanıcı seçeneği nerede engellemek düğme etiketinde çerçevelenir. Düğme, içindeki her şeyi, yani satır içi ve satır içi blok modellerinin öğelerini ortalama yeteneğine sahiptir. Pratikte, kullanmanızı önermiyorum.

Üst (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, harici dolguyu ayarlayabilirsiniz. engellemek, ve ikincisi kaydırma çubukları ile çevrili olarak yeterince görüntülenecektir.
Örnek: jsfiddle.net/serdidg/nfqg9rza/2.

Ayrıca resmi ortaya hizalayabilirsiniz ve resim daha büyükse ebeveyn, sığacak şekilde ölçeklendir ebeveyn.
Örnek: jsfiddle.net/serdidg/nfqg9rza/3.
Büyük resimli örnek:

Bugün sevgili okuyucu, bir blokta dikey hizalama problemini ele alacağız. div.

Büyük olasılıkla harika CSS özelliğini zaten biliyorsunuzdur dikey hizalama. Ve Tanrı bize bu özelliği dikey hizalama için kullanmamızı söyledi (bu kadar açıklayıcı bir isme sahip olması boşuna değil).

Sorunun formülasyonu: Değişken yükseklik bloğunun içeriğini dikeye göre ortalamak gerekir.

Şimdi sorunu çözmeye başlayalım.

Ve böylece bir bloğumuz var, yüksekliği değişebilir:

Akla gelen ilk şey aşağıdaki numarayı yapmaktır:

Bu ifadeye inanmak için her neden var İçeriği engelle konteyner div'in yüksekliğinin merkezine hizalanır.

Ama orada değildi! Bu şekilde herhangi bir beklenen merkez hizalamasını elde edemeyiz. Ve neden? Görünüşe göre her şey doğru bir şekilde belirtilmiş. İşin aslının bu olduğu ortaya çıktı: mülk dikey hizalama yalnızca tablo hücrelerinin içeriğini hizalamak veya satır içi öğeleri birbirine göre hizalamak için kullanılabilir.

Tablo hücresi içindeki hizalamaya gelince, her şeyin açık olduğunu düşünüyorum. Satır içi öğelerle başka bir durumu açıklayacağım.

Satır içi öğelerin dikey hizalaması

Satır içi etiketlerle ayrılmış bir metin diziniz olduğunu varsayalım. parçalara ayrılır:

Sen karşılama adet Metin!

Satır içi etiket, görünümü içeriğin yeni bir satıra kaydırılmasına yol açmayan bir kapsayıcı olarak anlaşılır.

Blok etiketinin eylemi, kap içeriğinin yeni bir satıra kaydırılmasına yol açar.

Bir blok etiketidir. Metin parçalarını bloklar içine alırsak

, sonra her biri yeni bir satırda görünecektir. etiketi kullanma hangisi, aksine

, küçük harf, kapların yeni bir satıra sarılması olmayacak, tüm kaplar tek satırda kalır.

konteyner Metnin bir bölümünü özel biçimlendirme ile belirtirken (renkle vurgulama, farklı bir yazı tipi vb.)

Konteynerler için aşağıdaki CSS özelliklerini uygulayın:

#perviy (dikey hizalama: alt;) #vtoroy (dikey hizalama: 3px;) #tretiy (dikey hizalama: -3px;)

Sonuç olarak, metin satırı şöyle görünecektir:

Bu, satır içi öğelerin dikey hizalanmasından ve CSS özelliğinden başka bir şey değildir. dikey hizalama bu görevle mükemmel bir şekilde başa çıkıyor.

Biraz dalıyoruz, şimdi ana görevimize dönüyoruz.

Bir div kapsayıcısında dikey hizalama

Ne olursa olsun, div kapsayıcısının içinde hizalamak için özelliği kullanacağız. dikey hizalama... Daha önce de söylediğim gibi, bu özellik satır içi elemanların hizalanması durumunda kullanılabilir (bu durumu yukarıda ayrıntılı olarak tartıştık ve bir div kapsayıcısında hizalama için bize uygun değil); sadece gerçeği kullanmak için kalır dikey hizalama tablo hücreleri için çalışır.

Bunu nasıl kullanabiliriz? Bir masamız yok, bir div konteyneri ile çalışıyoruz.

Ha, çok basit görünüyor.

CSS özelliği Görüntüle div bloğumuzu bir tablo hücresine dönüştürmemize izin verir, kolayca ve doğal olarak yapılabilir:

Bir sınıf div yapalım Metin hizalama:

Bu blok için aşağıdaki CSS özelliğini belirtin:

Textalign (ekran: tablo hücresi;)

Bu CSS talimatı, div'imizi görsel olarak herhangi bir şekilde değiştirmeden mucizevi bir şekilde bir tablo hücresine dönüştürecektir. Ve bir tablo hücresi için özelliği uygulayabiliriz dikey hizalama istenen dikey hizalama tam olarak çalışacaktır.

Ancak, her şey bu kadar basit bitemez. Harika bir IE tarayıcımız var. Mülkle nasıl çalışacağını bilmiyor ekran: tablo hücresi(htmlbook.ru web sitesindeki farklı tarayıcılarda bu CSS özelliğinin performansını gösteren tabloya aşina olmanızı öneririm). Bu nedenle, çeşitli hilelere gitmemiz gerekecek.

Tüm tarayıcılar için bir div kapsayıcısında hizalama elde etmenin birçok yolu vardır:

• Ek bir yardımcı div cotneyer kullanan yöntem
• İfade kullanan yöntem. Blok yüksekliklerinin akıllıca hesaplanmasıyla ilişkilidir. JavaScript bilgisi burada vazgeçilmezdir.
• line-height özelliğini kullanma. Bu yöntem, yalnızca yüksekliği bilinen bir blokta dikey hizalama için uygundur, yani genellikle uygulanamaz.
• IE tarayıcısı durumunda mutlak ve göreli içerik ofsetini kullanma. Bu yöntem bana en açık ve basit görünüyor. Ayrıca, değişken yükseklikte bir kap div için uygulanabilir. Üzerinde daha ayrıntılı olarak duracağız.

Anladığınız gibi, mülkiyetin yanlış anlaşılmasıyla ilişkili olarak IE'deki dikey hizalama problemini çözmek bizim için kalır. ekran: tablo hücresi(ne IE6, ne IE7, ne de IE8 bu mülke aşina değil). Bu nedenle, kullanarak koşullu yorumözellikle IE ailesinin tarayıcıları için diğer CSS özelliklerini belirteceğiz.

koşullu yorum

Tip tasarımı:

... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

koşullu yorum olarak adlandırılır (dikkatli olun, koşullu yorumun şekli verilen örnekle bir boşluk kalacak şekilde tam olarak eşleşmelidir).

Böyle bir koşullu yorumda yer alan talimatlar, yalnızca tarayıcının yorum yapması durumunda yürütülecektir. verilen kod, IE ailesine aittir.

Böylece, koşullu bir yorum kullanarak, IE dışındaki tüm tarayıcılardan bir kod parçasını gizleyebiliriz.

sorunun çözümü

Tüm bu maydanoz nedeniyle, HTML'mizi iki ek kapsayıcı ile beslememiz gerekecek. Metin bloğumuz şöyle görünecek:

sınıf kapsayıcı div için Metin hizalama içeriğini herkes için dikey olarak hizalayan CSS özelliklerini ayarlar normal tarayıcılar(elbette IE hariç):

Ekran: tablo hücresi; dikey hizalama: orta;

Ve bloğun genişliğini ve yüksekliğini ayarlayan iki özellik daha:

Genişlik: 500 piksel; yükseklik: 500 piksel;

Bu, tüm tarayıcılarda kabın içeriğini dikey olarak merkeze göre hizalamak için yeterlidir. IE hariç.

Şimdi hizalama ile ilgili özellikleri eklemeye başlıyoruz. IE ailesinin tarayıcıları için(onlar için ek bloklar kullandık div ve açıklık):

etikete atıfta bulunarak div bir sınıf bloğunun içinde Metin hizalama... Bunu yapmak için önce sınıfın adını, ardından bir boşlukla ayırarak atıfta bulunduğumuz etiketi belirtmeniz gerekir.

Textalign div (konum: mutlak; üst: %50;)

Böyle bir yapı şu anlama gelir: sınıfı olan bir blok içindeki tüm div etiketleri için Metin hizalama listelenen özellikleri uygulayın.

Buna göre, blok için belirtilen stiller Metin hizalama değiştirilmiştir:

Textalign (ekran: tablo hücresi; dikey hizalama: orta; genişlik: 500 piksel; yükseklik: 500 piksel; konum: göreli;)

Metin kutusunun sol üst noktası artık %50 aşağı kaydırılmıştır.

Neler olduğunu netleştirmek için bir örnek çizdim:

Resimden de görebileceğiniz gibi, biraz ilerleme kaydettik. Ama hepsi bu değil! Sarı kutunun sol üst noktası gerçekten de ana (mor) kutudan %50 aşağı hareket etmiştir. Ama mor bloğun yüksekliğinin yüzde ellisi kadar bir şeye ihtiyacımız var. sarı bloğun merkezi, sol üst noktası değil.

Şimdi etiket kullanılacak açıklık ve göreli konumu:

Textalign yayılma alanı (konum: göreli; üst: -%50;)

Böylece sarı bloğu, başlangıç ​​pozisyonuna göre yüksekliğinin %50'si kadar yukarı kaydırdık. Tahmin edebileceğiniz gibi, sarı kutunun yüksekliği ortalanmış içeriğin yüksekliğine eşittir. Ve span kapsayıcı ile yapılan son işlem, içeriğimizi mor bloğun ortasına yerleştirdi. Yaşasın!

küçük bir şaman

Öncelikle maydanozu tüm normal tarayıcılardan gizlememiz ve IE için açmamız gerekiyor. Bu, elbette, koşullu bir yorum yardımıyla yapılabilir, onunla tanışmamız boşuna değildi:

Küçük bir sorun var. Ortalanmış içerik çok yüksekse, hoş olmayan sonuçlara yol açar: ekstra dikey kaydırma yüksekliği görünür.

Çözüm:özellik eklemek gerekiyor taşma: gizli engellemek Metin hizalama.

Mülkü ayrıntılı olarak tanıyın taşma içinde olabilir.

CSS blok talimatlarının son görünümü Metin hizalamaşuna benziyor:

Metin hizalama (ekran: tablo hücresi; dikey hizalama: orta; genişlik: 500 piksel; yükseklik: 500 piksel; konum: göreli; taşma: gizli; kenarlık: 1 piksel düz siyah;)

Kusura bakmayın önemli bir noktadan bahsetmeyi unuttum. Eğer denersen sınıf bloğunun yüksekliğini ayarla Metin hizalama yüzde olarak o zaman sahipsin ondan bir şey çıkmaz.

Değişken yükseklik bloğunda merkezleme

Bir sınıf bloğunun yüksekliğini ayarlamak çok sık gereklidir. Metin hizalama piksel olarak değil, ana bloğun yüksekliğinin yüzdesi olarak ve div kabının içeriğini ortada hizalayın.

Buradaki sorun, bunu bir tablo hücresi (ve sonuçta sınıf bloğu) için yapmanın imkansız olmasıdır. Metin hizalamaözelliği sayesinde bir tablo hücresine dönüşür ekran: tablo hücresi).

Bu durumda, CSS özelliğinin belirtildiği harici bir blok kullanmanız gerekir. ekran: tablo ve zaten yüksekliğin yüzde değerini ayarlaması için. Ardından blok, CSS yönergesi ile iç içe geçmiştir. ekran: tablo hücresi, üst bloğun yüksekliğini mutlu bir şekilde devralır.

Örneğimizde değişken yükseklikte bir blok uygulamak için CSS'de biraz ince ayar yapacağız:

Sınıf Metin hizalamaözellik değerini değiştireceğiz Görüntüleİle tablo hücresiüzerinde tablo ve hizalama yönergesini kaldırın dikey hizalama: orta... Artık yükseklik değerini 500 pikselden örneğin %100'e güvenle değiştirebiliriz.

Böylece, sınıf bloğu için CSS özellikleri Metin hizalamaşöyle görünecek:

Textalign (ekran: tablo; genişlik: 500 piksel; yükseklik: %100; konum: göreli; taşma: gizli; kenarlık: 1 piksel düz siyah;)

İçeriğin merkezlenmesini uygulamak için kalır. Bunu yapmak için, bir sınıf bloğunda yuvalanmış bir kapsayıcı div Metin hizalama(resimdeki aynı sarı bloktur), CSS özelliğini ayarlamanız gerekir ekran: tablo hücresi o zaman üst bloktan %100 yüksekliği devralır Metin hizalama(mor blok). Ve hiçbir şey, merkezdeki yuvalanmış div kabının içeriğini özellik ile hizalamamızı engellemez. dikey hizalama: orta.

Kapta yuvalanmış div için başka bir ek CSS özellikleri listesi alırız Metin hizalama.

Textalign div (ekran: tablo hücresi; dikey hizalama: orta;)

Bütün numara bu. İsteğe bağlı olarak, ortalanmış içerikle yüksekliği değiştirebilirsiniz.

Değişken yükseklikteki bir bloğu dikey olarak hizalama hakkında daha fazla bilgi için bkz.

Merhaba! Temel bilgilerde ustalaşmaya devam ediyoruz HTML dili... Metni ortaya, genişliğe veya kenarlara hizalamak için ne yazmanız gerektiğini görelim.

İşe başlarken, HTML metninin nasıl üç merkezli hale getirileceğine bir göz atalım. Farklı yollar... Son ikisi doğrudan stil sayfasıyla ilgilidir. Site sayfalarına bağlanan ve görünümlerini belirleyen bir CSS dosyası olabilir.

Yöntem 1 - doğrudan HTML ile çalışma

Aslında, her şey oldukça basittir. Aşağıdaki bir örneğe bakın.

Bir paragrafın orta hizalaması.

Metin parçalarını farklı bir şekilde kaydırmanız gerekirse, "center" parametresi yerine aşağıdaki değerleri yazın:

• yasla - metnin sayfanın genişliğine göre hizalanması;
• sağ - sağa hizalı;
• sol sol.

Benzer şekilde, başlıklarda (h1, h2), kapsayıcıda (div) bulunan içeriği taşıyabilirsiniz.

Yöntem 2 ve 3 - stilleri kullanma

Yukarıda sunulan tasarım biraz dönüştürülebilir. Etkisi aynı olacaktır. Bunu yapmak için aşağıdaki kodu kaydetmeniz gerekir.

Metin bloğu.

Bu nedenle, metin içeriğini ortalamak için kod doğrudan HTML'ye yazılır.

Bir sonuca ulaşmak için alternatif bir seçenek de vardır. Birkaç adım yapmanız gerekecek.

Adım 1. Ana kodda şunu yazın

Metin malzemesi.

Adım 2. Dahil edilen CSS dosyasına aşağıdaki kodu girin:

Rovno (metin hizalama: merkez;)

"Rovno" kelimesinin yalnızca farklı şekilde çağrılabilecek bir sınıfın adı olduğuna dikkat edin. Bu, programcının takdirine bırakılmıştır.

HTML'de benzetme yaparak, metni kolayca ortalayabilir, genişliğini ve sayfanın sağına veya soluna hizalayabilirsiniz. Gördüğünüz gibi, hedefe ulaşmak için tek bir seçenek yok.

Sadece birkaç soru:

• Bilgilendirici, ticari olmayan bir proje mi yapıyorsunuz?
• Sitenin şu alanlarda iyi tanıtım yapmasını istiyor musunuz? arama motorları?
• İnternetten gelir elde etmek ister misiniz?

Tüm cevaplar olumluysa, web sitesi geliştirmeye yönelik entegre bir yaklaşıma bakın. Bilgiler, özellikle bir WordPress CMS tarafından destekleniyorsa yardımcı olacaktır.

Kendi sitelerinizin internette pasif veya aktif gelir elde etmek için birçok seçenekten sadece biri olduğunu belirtmek isterim. Blogum sadece web'deki finansal fırsatlarla ilgili.

Trafik arbitrajı, metin yazarlığı ve ana veya ek gelir uzaktan işbirliği için? Bunu ve daha fazlasını hemen şimdi blogumun sayfalarında öğrenebilirsiniz.

İleride çok daha gerçek yayınlayacağım kullanışlı bilgi... İletişimde kalın. Dilerseniz Workip güncellemelerine e-posta ile abone olabilirsiniz. Abonelik formu aşağıdadır.