Öğeleri CSS ile dikey olarak ortalamak, geliştiriciler için bir zorluktur. Bununla birlikte, bunu çözmek için oldukça basit olan birkaç yöntem vardır. Bu ders, içeriği dikey olarak ortalamak için 6 seçenek sunar.

Sorunun genel bir açıklamasıyla başlayalım.

Dikey merkezleme sorunu

Yatay merkezleme çok basit ve kolaydır. Ortalanmış öğe satır içi olduğunda, üst öğeye göre hizalama özelliğini kullanın. Öğe blok olduğunda - genişliğini ayarlayın ve sol ve sağ kenar boşluklarını otomatik olarak ayarlayın.

Çoğu kişi, metin hizalama: özelliğini kullanırken, dikey ortalama için dikey hizalama özelliğine başvurur. Her şey oldukça mantıklı görünüyor. Tablo şablonları kullandıysanız, muhtemelen dikey hizalamanın doğru yol olduğu inancını güçlendiren valign niteliğini yoğun bir şekilde kullanmışsınızdır.

Ancak valign niteliği yalnızca tablo hücrelerinde çalışır. Dikey hizalama özelliği de çok benzer. Ayrıca tablo hücrelerini ve bazı satır içi öğeleri de etkiler.

Dikey hizalama özelliğinin değeri, üst satır içi öğeye göredir.

• Bir metin satırında hizalama, satır yüksekliğine göredir.
• Tablo hücresi, özel bir algoritma tarafından hesaplanan değere göre hizalamayı kullanır (genellikle satır yüksekliği elde edilir).

Ancak ne yazık ki dikey hizalama özelliği blok düzeyindeki öğelerde (bir div öğesinin içindeki paragraflar gibi) çalışmaz. Bu durum düşey hizalama sorununun bir çözümü olmadığı düşüncesine yol açabilir.

Ancak, seçimi dış konteynere göre neyin ortalandığına bağlı olan, blok düzeyindeki öğeleri ortalamanın başka yöntemleri de vardır.

çizgi yüksekliği yöntemi

Bu yöntem, bir metin satırını dikey olarak ortalamak istediğinizde çalışır. Tek yapmanız gereken satır yüksekliğini yazı tipi boyutundan daha büyük olacak şekilde ayarlamak.

Varsayılan olarak, boş alan metnin üstünde ve altında eşit olarak dağıtılacaktır. Ve çizgi dikey olarak ortalanacaktır. Genellikle çizgi yüksekliği, elemanın yüksekliğine eşit yapılır.

HTML:

CSS:

#child (satır yüksekliği: 200 piksel; )

Bu yöntem tüm tarayıcılarda çalışır, ancak yalnızca tek bir satır için kullanılabilir. Örnekte 200 piksel değeri keyfi olarak seçilmiştir. Metin yazı tipi boyutundan daha büyük herhangi bir değer kullanabilirsiniz.

Satır yüksekliği olan bir görüntüyü ortalama

Ya içerik bir resim ise? Yukarıdaki yöntem işe yarayacak mı? Cevap, başka bir CSS kodu satırında yatmaktadır.

HTML:

CSS:

#parent ( line-height: 200px; ) #parent img ( dikey hizalama: orta; )

Line-height özelliğinin değeri görüntünün yüksekliğinden büyük olmalıdır.

CSS Tablo Yöntemi

Yukarıda belirtildiği gibi, dikey hizalama özelliği, harika çalıştığı tablo hücrelerine uygulanır. Öğemizi bir tablo hücresi olarak oluşturabilir ve içeriği dikey olarak ortalamak için dikey hizalama özelliğini kullanabiliriz.

Not: Bir CSS tablosu, bir HTML tablosu ile aynı değildir.

HTML:

CSS:

#parent (ekran: tablo;) #child (ekran: tablo hücresi; dikey hizalama: orta; )

Tablo çıktısını üst div'e ayarlıyoruz ve iç içe div'i bir tablo hücresi haline getiriyoruz. Artık dikey hizalama özelliğini iç kapta kullanabilirsiniz. İçindeki her şey dikey olarak ortalanacak.

Yukarıdaki yöntemden farklı olarak, bu durumda içerik dinamik olabilir, çünkü div öğesi içeriğine uyacak şekilde yeniden boyutlandırılacaktır.

Bu yöntemin dezavantajı, IE'nin eski sürümlerinde çalışmamasıdır. İç içe kapsayıcı için display: inline-block özelliğini kullanmanız gerekir.

Mutlak konumlandırma ve negatif marjlar

Bu yöntem tüm tarayıcılarda da çalışır. Ancak ortalanmış elemana bir yükseklik verilmesini gerektirir.

Örnek kod, aynı anda hem yatay hem de dikey merkezleme yapar:

HTML:

CSS:

#parent (konum: göreceli;) #child (konum: mutlak; üst: %50; sol: %50; yükseklik: %30; genişlik: %50; kenar boşluğu: -%15 0 0 -%25; )

İlk olarak, elemanların konumlandırma tipini belirledik. Ardından, yuvalanmış div'de üst ve sol özellikleri, ana öğenin merkezi olan %50'ye ayarlayın. Ancak iç içe öğenin sol üst köşesi ortalanır. Bu nedenle, onu yukarı kaldırmanız (yüksekliğin yarısı) ve sola (genişliğin yarısı) hareket ettirmeniz gerekir ve ardından merkez, ana öğenin merkeziyle çakışacaktır. Dolayısıyla bu durumda elemanın yüksekliğini bilmek gereklidir. Sonra elemana sırasıyla yüksekliğin ve genişliğin yarısına eşit negatif üst ve sol kenar boşlukları veririz.

Bu yöntem tüm tarayıcılarda çalışmaz.

Mutlak konumlandırma ve germe

Örnek kod, dikey ve yatay merkezleme gerçekleştirir.

HTML:

CSS:

#parent (konum: göreceli;) #child (konum: mutlak; üst: 0; alt: 0; sol: 0; sağ: 0; genişlik: %50; yükseklik: %30; kenar boşluğu: otomatik; )

Bu yöntemin arkasındaki fikir, üst, alt, sağ ve sol özellikleri 0'a ayarlayarak iç içe öğeyi ana öğenin 4 sınırına kadar genişletmektir.

Tüm kenar boşluklarını otomatik olarak ayarlamak, 4 kenardaki değerleri de eşit olacak şekilde ayarlayacak ve iç içe div elemanımızı ana elemanın merkezine getirecektir.

Ne yazık ki, bu yöntem IE7 ve altında çalışmıyor.

Eşit dolgu üst ve alt

Bu yöntem, ana öğenin üstünde ve altında eşit dolguyu açıkça ayarlar.

HTML:

CSS:

#parent ( dolgu: %5 0; ) #çocuk ( dolgu: %10 0; )

Örnek için CSS kodunda, her iki öğe için üst ve alt dolgu ayarlanmıştır. Yuvalanmış bir eleman için dolguyu ayarlamak, onu dikey olarak ortalamaya yarar. Ve ana öğenin dolgusu, içindeki iç içe öğeyi ortalayacaktır.

Göreli birimler, öğeleri dinamik olarak yeniden boyutlandırmak için kullanılır. Ve mutlak ölçü birimleri için hesaplamaları yapmanız gerekecektir.

Örneğin, ana öğe 400 piksel yüksekliğinde ve iç içe öğe 100 piksel yüksekliğindeyse, üstte ve altta 150 piksel dolgu gerekir.

150 + 150 + 100 = 400

% kullanımı, hesaplamaların tarayıcıya bırakılmasına izin verir.

Bu yöntem her yerde işe yarar. Dezavantajı hesaplama ihtiyacıdır.

Not: Bu yöntem, öğenin kenar boşluğunu ayarlayarak çalışır. Bir öğe içinde kenar boşluklarını da kullanabilirsiniz. Kenar boşlukları veya dolgu uygulama kararı, projenin özelliklerine bağlı olarak verilmelidir.

yüzen div

Bu yöntem, yüzen ve belgedeki iç içe öğemizin konumunu kontrol etmeye yardımcı olan boş bir div öğesi kullanır. Kayan div öğesinin HTML kodundaki iç içe öğemizin önüne yerleştirildiğini unutmayın.

HTML:

CSS:

#parent (height: 250px;) #floater ( kayan nokta: sol; yükseklik: %50; genişlik: %100; kenar boşluğu: -50 piksel; ) #child ( clear: her ikisi; yükseklik: 100px; )

Boş div'i sola veya sağa kaydırır ve ona ana öğenin %50'sini veririz. Bu şekilde ana öğenin üst yarısını dolduracaktır.

Bu div yüzer olduğundan, belgenin normal akışından çıkarılır ve iç içe öğeyi çözmemiz gerekir. Örnek clear: Both kullanır, ancak kayan boş div öğesinin ofsetiyle aynı yönü kullanmak yeterlidir.

Yuvalanmış div öğesinin üst sınırı, boş div öğesinin alt sınırının hemen altındadır. Yuvalanmış öğeyi, yüzen boş öğenin yüksekliğinin yarısı kadar yukarı taşımamız gerekiyor. Sorunu çözmek için, yüzen boş bir div öğesi için margin-bottom özelliğinin negatif değeri kullanılır.

Bu yöntem tüm tarayıcılarda da çalışır. Bununla birlikte, onu kullanmak, ek bir boş div öğesi ve iç içe öğenin yüksekliği hakkında bilgi gerektirir.

Çözüm

Açıklanan tüm yöntemlerin kullanımı kolaydır. Zorluk, hiçbirinin tüm durumlar için uygun olmaması gerçeğinde yatmaktadır. Projeyi analiz etmek ve gereksinimlere en uygun olanı seçmek gerekir.

Float özelliğine sahip yatay olarak hizalama içeriği çok kolay bir şekilde yapılabilir ve aynı zamanda tamamen çapraz tarayıcıdır (Opera 8+, Firefox 3+, IE 5.5+'da çalışır).

div blok hizalama örneği

Bir yüzer kutuyu veya birden çok istiflenmiş kutuyu hizalamak için başka bir dış kutuya ihtiyaç vardır. Dış kutu ve iç kutulara konum atanmıştır: mutlak; ve yüzer: sol; , sola dış atama: %50; , ve sağdaki iç bloklar için: %50; . Float kullanmak için: sağ; harici atama hakkı atamanız gerekir: %50; , ve kalan iç bloklar: %50; . Merkez hizalı öğelerden sonra clear: Both; özelliğine sahip bir blok yerleştirerek kayan noktayı temizlemenizi öneririm. .

Bu şekilde aşağıdaki merkezlemeyi elde edebilirsiniz:

id = blok-inner olan iç blok yeşil bir kenarlığa sahiptir, id = blok olan dış blok ise noktalı kırmızı bir kenarlığa sahiptir.

#block (konum: göreli; kayan nokta: sol; sol: %50; kenarlık: 1 piksel kesikli #a00; ) #blok-inner ( konum: göreli; kayan nokta: sol; sağ: %50; kenarlık: 2 piksel düz #0a0; dolgu : 10px; ) #sayfa ( taşma: gizli; )

Menü Öğesi Hizalama Örneği

Uygulamada, yukarıdaki örnek site menüsü yatay olarak hizalandığında uygulanabilir. Ancak, yeterince fazla sayıda öğeyle (sayfa genişliğinin yarısından fazlasını kaplayan) yatay kaydırmanın göründüğü dikkate alınmalıdır. Bundan kurtulmak için dış blokta taşma özelliğini uygulamanız gerekir. Menü açılırsa, açılır öğeleri bu dış blok tarafından kesilebilir. Bu sorunu önlemek için, sayfanın tüm içeriğini saran en dıştaki kutu gibi mümkün olduğunca çevreleyen bir kutuya taşma özelliğini uygulamanız gerekir.

Örneğin, menüyü şu şekilde hizalayabilirsiniz:

ul listesinin li öğelerinin yeşil bir sınırı vardır ve ul listesinin kesikli kırmızı bir sınırı vardır.

Aşağıdaki örnek için HTML kodu şöyle görünür:

Aşağıdaki örnek için CSS kodu şöyle görünür:

#menu ( konum: bağıl; kayan nokta: sol; sol: %50; kenarlık: 1 piksel kesikli #a00; liste stili: yok; kenar boşluğu: 0; dolgu: 0; ) #menu li ( konum: bağıl; kayan nokta: sol; sağ: %50; kenarlık: 2 piksel katı #0a0; dolgu: 10 piksel; ) #sayfa ( taşma: gizli; )

Bu yüzden oldukça basit. Yeni yöntemlerde ustalaşmada başarılar dilerim.

Elemanları yatay ve dikey olarak hizalama çeşitli şekillerde yapılabilir. Yöntem seçimi, elemanın tipine (blok veya satır içi), konumlandırma tipine, boyutuna 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, onu display:block;

1.2. Bir blok başka bir blok içinde yuvalanmışsa ve bunun için bir genişlik/genişlik ayarlanmamışsa:

.wrapper(metin hizalama:merkez;)

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

.wrapper (konum: göreceli; /*kutuyu daha sonra içine kesinlikle yerleştirebilmemiz için üst kutuyu göreli konuma ayarlayın*/) .box ( genişlik: 400 piksel; konum: mutlak; sol: %50; kenar boşluğu: - 200px; / *bloğu genişliğinin yarısına eşit bir mesafeyle sola kaydır*/ )

1.4. Bloklar için genişlik ayarlanmadıysa, ana sarmalayıcı bloğunu kullanarak ortalayabilirsiniz:

.wrapper (metin hizalama: merkez; /*blok içeriğini ortalayın*/) bloklar arasında girinti yapın*/ )

2. Dikey hizalama

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

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

2.2. Bir bloğu ana bloğun içinde 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 ( görüntü: tablo; genişlik: %100; ) .box ( görüntü: tablo hücresi; yükseklik: 100 piksel; metin hizalama: merkez; dikey hizalama: orta; )

2.4. Kutunun genişliği ve yüksekliği ayarlanmışsa ve ana kutuda 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; /*to içerik yayılmadı */ )

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

elemanın boyutları varsa

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

elemanın boyutu yoksa ve boş değilse

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

Yazardan: Blog sayfalarımıza tekrar hoş geldiniz. Bugünkü yazımda hem bloklara hem de içeriklerine uygulanabilecek çeşitli hizalama tekniklerinden bahsetmek istiyorum. Özellikle, metin hizalamasının yanı sıra css'de blokların nasıl hizalanacağı.

Blokları merkeze hizalayın

Bir bloğu css'de ortalamak kolaydır. Bu, birçokları için en ünlü tekniktir, ancak hemen şimdi bundan bahsetmek istiyorum, her şeyden önce. Bunun ana öğeye göre yatay olarak ortalanması amaçlanmıştır. Nasıl gerçekleştirilir? Diyelim ki bir konteynerimiz var ve test konumuzun içinde:

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

Diyelim ki bu sitenin başlığı. Pencerenin tüm genişliğini kaplamıyor ve onu ortalamamız gerekiyor. Şöyle yazıyoruz:

#başlık( genişlik / maks - genişlik : 800 piksel ; kenar boşluğu : 0 otomatik ;

Tam veya maksimum genişliği belirtmemiz ve ardından anahtar özelliğini yazmamız gerekiyor - margin: 0 auto. Başlığımızın kenar boşluklarını belirler, ilk değer üstten ve alttan kenar boşluklarını belirler ve ikincisi - sağdan ve soldan. Otomatik değer, tarayıcıya, öğenin ana öğe üzerinde tam olarak ortalanması için her iki taraftaki dolguyu otomatik olarak hesaplamasını söyler. Uygun!

Metin hizalama

Bu da çok basit bir hiledir. Tüm satır içi öğeleri hizalamak için, metin hizalama özelliğini ve değerlerini kullanabilirsiniz: sol, sağ, orta. Sonuncusu metni ortalar, ki bu bizim istediğimiz şeydir. Bir resim bile aynı şekilde hizalanabilir, çünkü o da varsayılan olarak bir satır içi öğedir.

Metni dikey olarak hizala

Ama bu zaten daha zor. Varsayılan olarak, metni bir blok kapsayıcısında dikey olarak kolayca ortalayacak böyle basit, iyi bilinen bir özellik yoktur. Bununla birlikte, yerleşim tasarımcılarının yıllar içinde ortaya çıkardığı birkaç püf noktası vardır.

Dolgu kullanarak blok yüksekliğini ayarlayın. Yol, yükseklik ile açık bir yükseklik ayarlamak değil, aynı olması gereken üst ve alt dolgularla yapay olarak oluşturmaktır. Herhangi bir blok oluşturalım ve ona aşağıdaki özellikleri yazalım:

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

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

Arka plan sadece kenarları ve dolguyu görsel olarak görmek içindir. Şimdi bloğun yüksekliği bu iki girintiden ve satırın kendisinden oluşuyor ve hepsi şöyle görünüyor:

Blok için bir satır yüksekliği tanımlayın. Bana öyle geliyor ki, bir metin satırını hizalamanız gerekiyorsa, bu daha doğru bir yol. Bununla, height özelliğini kullanarak normal yüksekliği kaydedebilirsiniz. Bundan sonra, bir bütün olarak bloğun yüksekliği ile aynı olan çizginin yüksekliğini de ayarlaması gerekir.

div(yükseklik: 60 piksel; satır yüksekliği: 60 piksel; )

div ( yükseklik: 60 piksel satır yüksekliği: 60 piksel;

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

Bloğu tablo hücresine dönüştürün. Bu yöntemin özü, dikey hizalama: orta özelliğin, öğeyi dikey olarak ortalayan tablo hücresine etki etmesidir. Buna göre, bu durumda, blok aşağıdaki şekilde ayarlanmalıdır:

div( görüntü: tablo hücresi; dikey hizalama: orta; )

div ( ekran : tablo - hücre ; dikey hizalama : orta ;

Bu yöntem güzel çünkü ortada istediğiniz kadar metin hizalayabilirsiniz. Ancak display: table öğesini div'imizin yuvalandığı bloğa ayarlamak daha iyidir, aksi takdirde çalışmayabilir.

İşte bugünün son numarasına geliyoruz - bu, blokların dikey olarak hizalanmasıdır. Yine şunu söylemek gerekir ki, bunun için özel olarak tasarlanmış bir özellik yoktur ancak bilmeniz gereken birkaç püf noktası vardır.

Ofsetleri yüzde olarak ayarlayın. Ana öğenin yüksekliğini biliyorsanız ve içine başka bir blok düzeyinde öğe yerleştirirseniz, yüzde dolgusunu kullanarak onu ortalayabilirsiniz. Örneğin, ebeveynin yüksekliği 600 pikseldir. İçine 300 piksel yüksekliğinde bir blok koydunuz. Merkezlemek için yukarıdan ve aşağıdan ne kadar yedeklemeniz gerekiyor? Ebeveynin boyunun %25'i olan her biri 150 piksel.

Bu yöntem, yalnızca boyutlar hesaplama yapmanıza izin verdiğinde merkezleme yapmanızı sağlar. Ve 887 piksel yüksekliğinde bir ebeveyniniz varsa, o zaman tam olarak hiçbir şey yazamazsınız, bu zaten açıktır.

Bir tablo hücresine bir öğe ekleyin. Yine, ana öğeyi bir tablo hücresine dönüştürürsek, içine eklenen blok otomatik olarak dikey olarak ortalanacaktır. Bunu yapmak için ebeveynin yalnızca dikey hizalama: orta ayarlaması gerekir.

Buna ek olarak, margin: 0 auto yazarsak, eleman yatay olarak ortalanır!

Sanırım yerleşim planı yapan birçoğunuz, elemanları dikey olarak hizalama ihtiyacıyla karşılaştınız ve bir elemanı merkeze hizalarken ne gibi zorluklar ortaya çıktığını biliyorsunuz.

Evet, CSS'de dikey hizalama için birçok değere sahip özel bir dikey hizalama özelliği vardır. Ancak pratikte beklendiği gibi çalışmaz. Bunu anlamaya çalışalım.

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

• tablolar,
• girinti,
• 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 öğesi vardır. Onlara uygun sınıfları verelim - dış ve iç .

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

Başlamak için, dış ve iç bloğun boyutlarının ne zaman olduğunu düşünün. bilinen. İç öğeye display: inline-block ve dış öğeye text-align: center ve vertical-align: orta ekleyelim.

Hizalamanın yalnızca satır içi veya satır içi blok görüntüleme moduna sahip öğeler için geçerli olduğunu unutmayın.

Blokların boyutlarını ve kenarlıklarını görmek için arka plan renklerini ayarlayalım.

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, iç bloğun yatay olarak hizalandığını ancak dikey olarak hizalanmadığını göreceğiz:
http://jsfiddle.net/c1bgfffq/

Neden oldu? Gerçek şu ki, dikey hizalama özelliği hizalamayı etkiler öğenin kendisi, içeriği değil(tablo hücrelerine uygulandığı durumlar hariç). Bu nedenle, bu özelliği dış elemana uygulamak hiçbir şey yapmadı. Ayrıca, bu özelliği iç elemana uygulamak da hiçbir şey yapmaz, çünkü satır içi bloklar komşu bloklarla 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 bakalım.

Bir tablo ile hizalama

İlk akla gelen çözüm, dış bloğu tek hücreli bir tabloyla değiştirmek. Bu durumda, hizalama hücrenin içeriğine yani iç bloğa uygulanacaktır.

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

Bu çözümün bariz dezavantajı, anlambilim açısından hizalama için tabloları kullanmanın yanlış olmasıdır. İkinci dezavantaj, bir tablo oluşturmak için dış bloğun etrafına bir eleman daha 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 ( display: table; ) .outer ( display: tablo-hücresi; )
Bununla birlikte, dış blok, takip eden tüm sonuçları olan bir masa olmaya devam edecektir.

Dolgu ile hizalama

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

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

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

Çizgi yüksekliği ile hizalama

İç bloğun birden fazla metin satırı almaması 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, white-space: nowrap ve overflow: hidden kurallarını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 teknik ayrıca, iç blok için satır yüksekliği değerini geçersiz kılarsanız ve kuralları görüntüleme: satır içi blok ve dikey hizalama: orta eklerseniz, çok satırlı metni hizalamak için kullanılabilir.

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 yöntem, dış bloğun yüksekliği bilinmediğinde, ancak iç bloğun yüksekliği bilindiğinde kullanılabilir.

Bunun için ihtiyacınız olan:

1. dış bloğa göreli konumlandırmayı ve iç bloğa mutlak konumlandırmayı ayarlayın;
2. üst: 0 ve alt: 0 kurallarını iç bloğa ekleyin, bunun sonucunda dış bloğun tüm yüksekliğine kadar uzayacaktır;
3. iç bloğun dikey dolgusu için değeri 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 blok için bir yükseklik ayarlamanın, tarayıcının, değerleri otomatik olarak ayarlanmışsa dikey dolguyu eşit oranda hesaplamasına neden olması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ış bloğu göreceli konumlandırmaya ve iç bloğu mutlak konumlandırmaya ayarlamanız gerekir. Ardından, iç kutuyu dış kutunun üst kısmının yüksekliğinin yarısı kadar aşağı taşımanız gerekir: %50 ve kendi yüksekliğinin yarısı kadar yukarıya taşımanız gerekir: -H iç / 2.

Dış ( konum: göreli; ) .iç ( 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ç bloğun yüksekliği bilinmediğinde uygulanabilir. Bu durumda, piksel cinsinden negatif bir dolgu ayarlamak yerine transform özelliğini kullanabilir ve translateY işlevi ve -%50 değeri ile iç kutuyu yukarı kaldırabilirsiniz.

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

Neden önceki yöntemde değeri yüzde olarak ayarlamak imkansızdı? Kenar boşluğu özelliğinin yüzde değerleri ana öğeye göre olduğundan, %50'lik bir değer dış kutunun yüksekliğinin yarısına eşit olur ve iç kutuyu kendi yüksekliğinin yarısı kadar yükseltmemiz gerekir. transform özelliği tam olarak bunun içindir.

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

Flexbox ile Hizalama

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 her yere yerleştirmenizi sağlar. Flexbox için merkez hizalama çok basit bir iştir.

Dış bloğun görüntülenecek şekilde ayarlanması gerekir: flex ve iç bloğun margin: auto 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 kenar boşluğu yaklaşımı idealdir.
• Blok yüksekliğinin bilinmediği daha karmaşık durumlar için, bir sözde eleman veya transform özelliği kullanılmalıdır.
• IE'nin eski sürümlerini desteklemeye gerek duymayacak kadar şanslıysanız, elbette Flexbox daha iyidir.