CSS'deki tüm dikey hizalama yöntemleri. Ortaya Hizala DIV

Bu tipyasak öğeleri atlar.

Şimdi özelliğe geçelim hizalamak. Nesnelerin yatay hizalamasını ayarlar ve etiket bildiriminden sonra sığar. Genellikle içeriği sola hizalamak için kullanılabilir ( sol), sağ tarafta ( Sağ), merkezli ( merkez) ve metin genişliği ( savunmak).

Aşağıda resmi ve paragrafı ortaya koyacağım bir örnek vereceğim.

Bu içerik ortalanacak.

Resim için ayrıştırdığımız özniteliğin biraz farklı değerlere sahip olduğunu unutmayın.

kullandığım örnekte hizalamak="orta". Bu sayede görüntü, cümle tam olarak resmin ortasında olacak şekilde hizalanır.

CSS merkezleme araçları

Blokları, metni ve grafik içeriğini hizalamak için tasarlanmış CSS özellikleri çok daha sık kullanılır. Bunun başlıca nedeni stilleri uygulamadaki rahatlık ve esnekliktir.

Öyleyse, metin ortalamanın ilk özelliği ile başlayalım - bu metin-hizalamak.

Hizalama ile aynı işlevi görür. Anahtar kelimelerden birini seçebilirsiniz genel liste veya bir ata özelliklerini miras ( miras).

Css3'te 2 parametre daha ayarlayabileceğinizi belirtmek isterim: başlangıç– metni yazma kurallarına bağlı olarak (sağdan sola veya tersi), sola veya sağa hizalamayı ayarlar (sol veya sağ çalışmasına benzer) ve son- Başlangıcın tersi (metni soldan sağa yazarken sağ gibi, sağdan sola - sola yazarken) gibi davranır.

Size küçük bir numaradan bahsedeyim. Bir değer seçerken savunmak son satır aşağıdan çirkin bir şekilde sarkabilir. Örneğin merkeze yerleştirmek için bu özelliği kullanabilirsiniz. metin hizalama-son.

Site içeriğini veya tablo hücrelerini dikey olarak hizalamak için özelliği kullanın. dikey hizalama. Aşağıda ana hatları açıkladım anahtar kelimeler eleman.

Girinti

Ve son olarak paragraftaki girintiye geldik. Css dili, adı verilen özel bir özellik kullanır. metin girintisi.

Bununla hem kırmızı çizgi hem de çıkıntı yapabilirsiniz (negatif bir değer belirtmeniz gerekir).

Her örneği pratikte deneyenleri takdir ediyorum. Blogumun linklerini arkadaşlarınıza gönderin ve abone olmayı unutmayın. İyi şanlar! Güle güle!

Saygılarımla, Roman Chueshov

Okumak: 675 kez

Vlad Merjeviç

Tablo hücrelerinin içeriğinin aynı anda yatay ve dikey olarak hizalanabilmesi nedeniyle, elemanların birbirine göre konumunu kontrol etme olasılıkları genişletilir. Tablolar, resimlerin, metnin, form alanlarının ve diğer öğelerin hizalamasını birbirine ve bir bütün olarak web sayfasına göre ayarlamanıza olanak tanır. Genel olarak hizalama, esas olarak farklı öğeler arasında görsel bir bağlantı kurmak ve bunları gruplandırmak için gereklidir.

dikey merkezleme

Ziyaretçiye sitenin odağını ve başlığını göstermenin bir yolu açılış sayfası kullanmaktır. Bu, kural olarak, sitenin ana fikrini ifade eden bir flash-intro veya resmin bulunduğu ilk sayfadır. Resim ayrıca sitenin diğer bölümlerine bir bağlantıdır. Monitör çözünürlüğü ne olursa olsun bu resmin tarayıcı penceresinin ortasına yerleştirilmesi gerekmektedir. Bu amaçla, genişliği ve yüksekliği %100'e eşit olan bir tablo kullanabilirsiniz (örnek 1).

Örnek 1: Bir resmi ortalama

İÇİNDE bu örnek yatay hizalama, align="center" etiketi kullanılarak ayarlanır , ve bu konum varsayılan olarak ayarlandığından hücre içeriğinin dikey olarak ortalanması gerekmez.

Tablo yüksekliğini %100'e ayarlamak için kaldırın, kod artık geçerli değil.

Web sayfasının tüm kullanılabilir alanı için genişlik ve yüksekliğin kullanılması, boyutu ne olursa olsun, tablo içeriğinin kesinlikle tarayıcı penceresinin ortasına hizalanmasını sağlar.

Yatay hizalama

Etiketin hizalama (yatay hizalama) ve valign (dikey hizalama) niteliklerini birleştirerek , birbirine göre çeşitli eleman konumlarının ayarlanmasına izin verilir. Şek. Şekil 1, elemanların yatay olarak nasıl hizalanacağını gösterir.

Aşağıdaki şekle göre bazı metin hizalama örneklerine bakalım.

Üst hizalama

Hücre içeriğinin hizalamasını belirtmek için üst kenar, etiket için valign niteliğini top değeriyle ayarlamak gerekir (örnek 2).

Örnek 2: valign'ı kullanma

Bu örnekte, hücre özellikleri etiket parametreleri kullanılarak kontrol edilir. , ancak stiller arasında geçiş yapmak da daha uygundur. Özellikle hücre hizalaması, dikey hizalama ve metin hizalama özellikleriyle belirtilir (örnek 3).

Örnek 3: Hizalama için stilleri uygulama

Dikey hizalama ve doldurma özellikleri aynı anda iki hücreye uygulandığından, bu örnek kodu kısaltmak için seçici gruplandırmayı kullanır.

Alt hizalama aynı şekilde yapılır, ancak top yerine alt kullanılır.

Merkez hizalama

Varsayılan olarak, bir hücrenin içeriği dikeylerinin merkezine hizalanır; farklı yükseklikler sütunların üst hizalamaya ayarlanması gerekir. Bazen, örneğin Şekil 1'de gösterildiği gibi formülleri yerleştirirken orijinal hizalama yöntemini bırakmanız gerekir. 2.

Bu durumda, formül kesinlikle tarayıcı penceresinin ortasında bulunur ve numarası sağ kenardadır. Böyle bir eleman düzenlemesi için üç hücreli bir tabloya ihtiyacınız var. Dış hücreler aynı boyuta sahip olmalıdır, orta hücrede hizalama merkezde ve sağ hücrede - sağ kenarda yapılır (örnek 4). Formülün ortalanmasını sağlamak için bu hücre sayısı gereklidir.

Örnek 4: Formül Hizalama

(18.6)

Bu örnekte, tablonun ilk hücresi boş bırakılmıştır, yalnızca bir girinti oluşturmaya hizmet eder, bu arada stiller kullanılarak da ayarlanabilir.

Form öğelerini hizalama

Tablolar, özellikle aralarına metin serpiştirilmiş form alanlarını konumlandırmak için kullanışlıdır. Yorum girmek için tasarlanan formun tasarım seçeneklerinden biri Şekil 1'de gösterilmektedir. 3.

Form alanlarının yanındaki metnin sağa hizalanması ve form öğelerinin kendilerinin sola hizalanması için görünmez kenarlığı ve iki sütunu olan bir tabloya ihtiyacınız vardır. Sol sütun metnin kendisini, sağ sütun ise metin alanlarını içerecektir (örnek 5).

Örnek 5 Form Alanlarını Hizalama

Bu örnekte, sağa hizalama gerektiren hücreler için align="right" özelliği eklenmiştir. Böylece "Yorum" yazısı üst sınırçok satırlı metin, ilgili hücre valign niteliği kullanılarak üste hizalı olarak ayarlanır.

Yerleşim çalışması yapan birçoğunuzun öğeleri dikey olarak hizalama ihtiyacıyla karşılaştığını ve bir öğeyi merkeze hizalarken ne gibi zorluklar ortaya çıktığını bildiğinizi düşünüyorum.

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ışmıyor. Bunu anlamaya çalışalım.

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

• tablolar,
• girinti,
• satır yüksekliği ,
• germe,
• negatif kenar boşluğu,
• dönüştürmek,
• sözde eleman
• esnek kutu.

Biri diğerinin içinde iç içe geçmiş iki div öğesi vardır. Onlara uygun sınıfları verelim - outer ve inner .

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: middle kuralını 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/c1bgffffq/

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ış öğeye 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 var.

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

Tablo ile hizalama

Açık eksi bu karar- anlambilim açısından, hizalama için tabloların kullanılması yanlıştır. İkinci dezavantaj, bir tablo oluşturmak için dış bloğun etrafına bir eleman daha eklemeniz gerekmesidir.

İ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.

Dolgu ile hizalama

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

Çözümün dezavantajı, her iki bloğun yüksekliklerinin bilindiği sınırlı sayıda durumda uygulanabilmesidir.

Satır yüksekliği ile hizalama

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

Bu teknik, iç blok için satır yüksekliği değerini geçersiz kılarsanız ve display: inline-block ve Vertical-align: middle kurallarını eklerseniz, çok satırlı metni hizalamak için de kullanılabilir.

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

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

Uzatma Hizalaması

Bunun için ihtiyacınız var:

1. göreli konumlandırmayı dış bloğa ve mutlak konumlandırmayı iç bloğa 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.

Bu tekniğin özü, uzatılmış ve kesinlikle konumlandırılmış bir blok için bir yükseklik belirlemenin, değerleri auto olarak ayarlanmışsa, tarayıcının dikey dolguyu eşit oranlarda hesaplamasına neden olmasıdır.

Negatif kenar boşluğu ile hizalama

Dış bloğu göreceli konumlandırmaya ve iç bloğu mutlak konumlandırmaya ayarlamanız gerekir. Daha sonra, iç kutuyu dış kutunun üst kısmının yüksekliğinin yarısı kadar aşağı indirmeniz gerekir: %50 ve kendi yüksekliğinin yarısı kadar yukarı marj-üst: -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/c1bgffffq/13/

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

dönüşüm ile hizalama

Dış ( konum: göreli; ) .iç ( konum: mutlak; üst: %50; dönüşüm: öteleY(-%50); )
http://jsfiddle.net/c1bgffffq/9/

Önceki yöntemde değeri yüzde olarak ayarlamak neden imkansızdı? Margin özelliğinin yüzde değerleri parent elemana göreli olduğu için %50 değeri 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 blok mutlak konumlandırmaya sahipse uygulanamamasıdır.

Flexbox ile Hizalama

Dış bloğun display: flex olarak ayarlanması gerekir 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; ) . iç ( genişlik: 100 piksel; kenar boşluğu: otomatik; )
http://jsfiddle.net/c1bgffffq/14/

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

Hangi yolu seçmeli?

• Metnin dikey hizalanması için dikey dolgu veya satır yüksekliği özelliğini kullanmak daha iyidir.
• Yüksekliği bilinen (simgeler gibi) kesinlikle konumlandırılmış öğeler için, negatif kenar boşluğu yaklaşımı idealdir.
• Daha fazlası için zor vakalar, bloğun yüksekliği bilinmediğinde, bir sözde öğe veya transform özelliği kullanılmalıdır.
• IE'nin eski sürümlerini desteklemeniz gerekmeyecek kadar şanslıysanız, o zaman elbette Flexbox daha iyidir.

CSS'de Dikey Olarak Metin Hizalama- çok zor bir iş. Bununla mücadele eden yeterince insan gördüm ve gerçek duyarlı tasarım söz konusu olduğunda "kritik" hatalar bulmaya devam ediyorum.

Ancak korkmayın: Zaten CSS dikey hizalaması ile mücadele ediyorsanız, doğru yere geldiniz.

CSS dikey hizalama özelliği hakkında konuşalım

Web geliştirme alanında çalışmaya ilk başladığımda bu özellikten biraz muzdariptim. Klasik bir mülk gibi çalışması gerektiğini düşündüm” Metin hizalama". Ah keşke o kadar kolay olsa...

CSS dikey hizalama özelliği tablolarla iyi çalışır, ancak div'lerle veya diğer öğelerle çalışmaz. Bir div üzerinde kullandığınızda, öğeyi diğer bloklarla hizalar, ancak içeriğiyle hizalamaz. Bu durumda, özellik yalnızca display: inline-block; .

Örneğe bakın

İçeriği merkezlemek istiyoruz, div'in kendisini değil!

İki seçeneğiniz var. Yalnızca metin içeren div'leriniz varsa, line-height özelliğini kullanabilirsiniz. Bu, öğenin yüksekliğini bilmeniz gerektiği, ancak ayarlayamayacağınız anlamına gelir. Bu şekilde metniniz her zaman merkezde olacaktır.

Bu yaklaşımın gerçeği CSS dikey hizalaması bir dezavantaj var. Metin çok satırlıysa, satır yüksekliği satır sayısıyla çarpılır. Büyük olasılıkla, bu durumda, korkunç bir şekilde tasarlanmış bir sayfayla karşılaşacaksınız.

Bu örneğe bir göz atın

Ortalamak istediğiniz içerik birden fazla satırsa, tablo div'lerini kullanmak daha iyidir. Tabloları da kullanabilirsiniz, ancak bu anlamsal olarak doğru değildir. Duyarlı amaçlar için aralara ihtiyacınız varsa, div öğelerini kullanmak daha iyidir.

Bunun çalışması için, display:table ile bir üst kapsayıcı ve bunun içinde display:table-cell ve Vertical-align:mide ile ortalanmasını istediğiniz istenen sayıda sütun olmalıdır.

Örneğe bakın

Bu neden tablo düzeniyle çalışıyor ama div öğeleriyle çalışmıyor? Çünkü tablodaki satırlar aynı yüksekliğe sahiptir. Bir tablo hücresinin içeriği kullanılabilir tüm yükseklik alanını kullanmadığında, tarayıcı içeriği ortalamak için otomatik olarak dikey dolgu ekler.

konum özelliği

CSS div dikey hizalamasının temelleri ile başlayalım:

• konum: statik varsayılandır. Öğe, HTML sırasına göre oluşturulur;
• konum: mutlak - bir öğenin tam konumunu belirlemek için kullanılır. Bu konum her zaman görece konumlandırılmış en yakın ana öğeyle ilişkilendirilir (değil statik). Bir öğenin tam konumunu belirlemezseniz, onun üzerindeki kontrolü kaybedersiniz. Belge akışını tamamen göz ardı ederek rastgele işleyecektir. Öğe varsayılan olarak sol üst köşede görüntülenir;
• konum: göreceli - bir öğeyi normal (statik) konumuna göre konumlandırmak için kullanılır. Bu değer, belge akış sırasını korur;
• pozisyon: sabit - öğeyi tarayıcı penceresine göre konumlandırmak için kullanılır, böylece her zaman görüntü alanında görünür.

Not: bazı özellikler ( üst ve z-endeksi) yalnızca öğe konum olarak ayarlandıysa çalışır (değil statik).

İşe başlayalım!

uygulamak istiyor musun CSS dikey merkez hizalaması? Önce göreli konumu ve boyutları olan bir eleman oluşturun. Örneğin: genişlik ve yükseklik olarak %100.

İkinci adım, hedef tarayıcılara bağlı olarak farklı olabilir, ancak iki seçenekten biri kullanılabilir:

• Eski özellik: Genişliğin yarısını ve yüksekliğin yarısını kaldırmak için pencerenin tam boyutunu bilmeniz gerekir. Örneğe bakın;
• Yeni CSS3 Özelliği: %50 çeviri değerine sahip bir dönüştürme özelliği ekleyebilirsiniz ve blok her zaman merkezde olacaktır. Örneği görüntüle.

Temel olarak, içeriği ortalamak istiyorsanız, asla üstünü kullanma: %40 veya sol: 300px . Bu, test ekranlarında harika çalışıyor, ancak ortalamıyor.

Konumu hatırla: sabit mi? Bununla mutlak konumla aynı şeyi yapabilirsiniz, ancak ana öğe için göreli bir konuma ihtiyacınız yoktur - her zaman tarayıcı penceresine göre konumlanır.

Flexbox spesifikasyonunu duydunuz mu?

Flexbox'ı kullanabilirsiniz. Diğer seçeneklerden çok daha iyi. metni ortala CSS'yi dikey olarak hizala. Flexbox ile öğeleri yönetmek çocuk oyuncağıdır. Sorun şu ki, IE9 ve altı gibi bazı tarayıcıların kaldırılması gerekiyor. Bir bloğun dikey olarak nasıl ortalanacağına bir örnek:

Örneği görüntüle

Esnek kutu düzenini kullanarak birden çok kutuyu ortalayabilirsiniz.

Bu örneklerden öğrendiklerinizi uygularsanız, ustalaşabileceksiniz. CSS bloğu dikey olarak hizala mümkün olan en kısa sürede.

Bağlantılar ve daha fazla okuma

CSS İşaretlemesini Öğrenmek

FlexBox Kurbağa

esnek alan sanal alanı

Makalenin çevirisi “ Herkes için CSS Dikey Hizalama (Aptallar Dahil)” dost proje ekibi tarafından hazırlanmıştır.

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, çoğu kişi için en ünlü tekniktir, ancak öncelikle bundan bahsetmek istiyorum. Bunun ana öğeye göre yatay olarak ortalanması amaçlanmıştır. Nasıl yapılır? Diyelim ki bir konteynerimiz var ve test deneğimiz onun içinde:

Bunun sitenin başlığı olduğunu varsayalım. Pencerenin tüm genişliğini kaplamıyor ve onu ortalamamız gerekiyor. Şöyle yazıyoruz:

Kesin veya maksimum genişliği belirtmemiz ve ardından anahtar özelliği - marj: 0 otomatik yazmamız gerekir. Başlığımızın kenar boşluklarını ayarlar, ilk değer üstten ve alttan, ikincisi ise sağdan ve soldan kenar boşluklarını belirler. auto değeri, tarayıcıya, öğenin tam olarak ana öğe üzerinde ortalanması için her iki taraftaki dolguyu otomatik olarak hesaplaması talimatını verir. Rahat!

Metin hizalama

Bu aynı zamanda çok basit bir hiledir. Tüm satır içi öğeleri hizalamak için text-align özelliğini ve değerlerini kullanabilirsiniz: left, right, center. İkincisi, istediğimiz gibi metni ortalar. Bir resim bile aynı şekilde hizalanabilir çünkü o da varsayılan olarak bir satır içi öğedir.

Metni dikey olarak hizala

Ancak bu zaten daha zor. Varsayılan olarak, bir blok kapsayıcıdaki metni kolayca dikey olarak ortalayacak böyle basit, iyi bilinen bir özellik yoktur. Ancak, mizanpaj tasarımcılarının yıllar boyunca bulduğu birkaç numara var.

Dolgu kullanarak blok yüksekliğini ayarlayın. Yol, yükseklik ile belirgin 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: 30px 0; )

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

Blok için bir satır yüksekliği tanımlayın. bence daha fazlası Doğru yol bir metin satırını hizalamanız gerekirse. Bununla birlikte, 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; )

Sonuç yukarıdaki resme benzer olacaktır. Dolgu ekleseniz bile her şey çalışacaktır. Ancak, yalnızca bir satır için. Bir öğede daha fazla metne ihtiyacınız varsa, o zaman Bu taraftançalışmayacak.

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

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

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

İşte bugünün son numarasına geldik - bu, blokların kendilerinin dikey olarak hizalanmasıdır. Yine belirtmek 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. Üst öğenin yüksekliğini biliyorsanız ve içine başka bir blok düzeyinde öğe yerleştirirseniz, yüzde dolgusunu kullanarak ortalayabilirsiniz. Örneğin, ebeveynin yüksekliği 600 pikseldir. İçine 300px yüksekliğinde bir blok koyuyorsunuz. Ortalamak için yukarıdan ve aşağıdan ne kadar yedeklemeniz gerekiyor? Ebeveyn 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 boyunda bir ebeveyniniz varsa, o zaman tam olarak hiçbir şey yazamayacaksınız, bu zaten açık.

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 ortalanır. Bunu yapmak için, ebeveynin sadece dikey hizalamayı ayarlaması gerekir: orta.

Ve buna ek olarak, ayrıca margin: 0 auto yazarsak, o zaman eleman yatay olarak ortalanır!