dikey hizalama. Bloğu merkeze hizalayın. Bir bloğu üst blok içinde dikey olarak hizalamak için

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

Bu yöntem tüm tarayıcılarda çalışır ancak bir satırlık metin için kullanılması gerektiğini unutmayınız. Metniniz birden fazla satıra yayılıyorsa, farklı bir yöntem kullanın. Line-height özelliğinin değeri herhangi bir şey olabilir, ancak yazı tipinin yüksekliğinden az olamaz. Uygulamada, bu yöntem yatay bir menüyü ortalamak için harikadır.

Tablo Özelliklerini Kullanan CSS Yöntemi

Daha önce yazdığım gibi, hücre içeriği dikey hizalama CSS özelliği kullanılarak ortalanabilir. Üst öğe bir tablo olarak temsil edilmelidir, alt öğe bir hücre olarak belirlenmeli ve dikey hizalama özelliği ona orta değer uygulanmış olmalıdır. Bu şekilde, alt öğedeki herhangi bir içerik dikey olarak ortalanacaktır. CSS kodu aşağıdadır.

#ebeveyn ( ekran: tablo;) #çocuk ( ekran: tablo hücresi; dikey hizalama: orta; )

Ne yazık ki, bu yöntem IE'nin eski sürümlerinde çalışmaz. IE6 ve altı için desteğe ihtiyacınız varsa alt öğeye bir display: inline-block bildirimi ekleyin.

#child (ekran: satır içi blok; )

Mutlak konumlandırma ve negatif marj

Bu yöntem, blok düzeyindeki öğeler içindir ve tüm tarayıcılarda çalışır. Ortalanacak elemanın yüksekliğini ayarlamanız gerekir.

Alt öğenin verilen yöntemi kullanarak ortalandığı kod aşağıdadır.

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

İlk adım, üst ve alt öğeleri konumlandırmaktır. Ardından, alt öğenin ofsetini üst öğenin üst (üst) ve sol tarafına (sol) göre %50 olarak ayarlıyoruz, böylece alt öğeyi üst öğeye göre ortalıyoruz. Bununla birlikte, manipülasyonlarımız, alt öğenin sağ üst köşesini, elbette bize uymayan ana öğenin merkezine yerleştirecektir.

Görevimiz, alt öğeyi üst öğeye göre yukarı ve sola hareket ettirmektir, böylece alt öğe görsel olarak dikey ve yatay olarak ortalanır. Bu nedenle, alt öğenin yüksekliğini ve genişliğini bilmemiz gerekir.

Bu nedenle, alt öğeye, alt öğenin genişliğinin ve yüksekliğinin sırasıyla yarısına eşit bir negatif üst ve sol kenar boşluğu vermeliyiz.

İlk iki yöntemin aksine, bu yöntem blok düzeyindeki öğeler içindir. Yöntem tüm tarayıcılarda çalışır, ancak içerik üst öğenin yüksekliğini aşabilir ve onu aşabilir. Bu yöntem, öğelerin yüksekliği ve genişliği sabitlendiğinde en iyi sonucu verir.

Bir alt öğenin mutlak konumlandırılması

Önceki yöntemde olduğu gibi, ebeveyn ve çocuk elemanlar sırasıyla göreceli ve mutlak olarak konumlandırılır.

CSS kodunda alt öğeyi hem dikey hem de yatay olarak ortalarım, ancak yalnızca dikey ortalamayı kullanabilirsiniz.

#parent (konum: göreli;) #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 fikri, top , left , right , bottom özellik değerlerini 0'a eşit kullanarak alt öğeyi konumlandırabilmemizdir. Çocuk öğemiz üst öğeden küçük olduğu için " üst öğeye yapıştırın”.

Alt öğenin dört kenarı için kenar boşluğu değerleri sıfırdır, bu da öğeyi üst öğeye göre dikey olarak ortalanmış yapar. Ne yazık ki, bu yöntemin önceki yöntemle aynı dezavantajları vardır: çocuğun yüksekliğini ve genişliğini düzeltmek gerekir, eski IE tarayıcıları için destek eksikliği.

Alt ve üst kenar boşlukları eşittir

Bu yöntemde, alt öğenin görsel olarak dikey olarak ortalanması sayesinde, üst öğeye açıkça eşit dolgu (alt ve üst) atarız.

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

Göreceli boyutları kullanıyorum. Blok boyutları sabitse, bazı matematiksel hesaplamalar gerekecektir.

Örneğin, ana öğe 400 piksel yüksekliğinde ve alt öğe 100 piksel yüksekliğindeyse, üst ve alt dolguyu 150 piksel olarak ayarlamalısınız.

150 + 150 + 100 = 400

kayan div

Bu yöntem, alt öğenin dikey konumunu kontrol eden boş bir kayan kutu kullanır. Kayan div alt öğeden önce yerleştirilmelidir, aşağıdaki HTML koduna bakın.

#parent (yükseklik: 250 piksel;) #floater ( kayan nokta: sol; yükseklik: %50; genişlik: %100; alt kenar boşluğu: -50 piksel; ) #çocuk ( açık: her ikisi; yükseklik: 100 piksel; )

Önce kayan kutuyu sola (veya sağa) hareket ettiriyoruz ve ona ana öğenin %50'si kadar bir yükseklik veriyoruz. Bu şekilde kayan blok, üst öğenin üst yarısını dolduracaktır.

Blok kayan olduğundan, belgenin genel akışından çıkarılır, bu nedenle alt bloğa her ikisinin değeriyle clear özelliği atanmalıdır. Değeri her ikisi olarak ayarladım, ancak kayan elemanın konumlandırma yönüyle aynı olan değeri kullanabilirsiniz.

Artık alt öğenin üst kenarı, kayan öğenin alt kenarının hemen altındadır. Alt öğeyi kayan öğenin yüksekliğinin yarısı kadar yükseltmemiz gerekiyor. Bunu yapmak için, kayan blok için %50'ye eşit bir negatif alt kenar boşluğu ayarlamak yeterlidir.

Tüm tarayıcılarda çalışır. Bu yöntemin dezavantajı, boş bir bloğa ihtiyaç duyması ve alt öğenin yüksekliğini bilmesi gerekmesidir.

Sayfadaki öğeleri hizalama görevi hakkında halihazırda kaç kopya kırılmıştır. Smashing Magazine - CSS'de Mutlak Yatay ve Dikey Merkezleme için Stephen Shaw'dan bu soruna bir çözüm içeren mükemmel bir makalenin çevirisini dikkatinize sunuyorum.

Hepimiz biliyorduk kenar boşluğu: 0 otomatik; yatay merkezleme için, ancak kenar boşluğu: otomatik; dikey için çalışmadı. Bu, yalnızca yüksekliği ayarlayarak ve aşağıdaki stilleri uygulayarak kolayca düzeltilebilir:

Mutlak Merkez ( kenar boşluğu: otomatik; konum: mutlak; üst: 0; sol: 0; alt: 0; sağ: 0; )
Bu çözümü ilk öneren ben değilim, ancak bu yaklaşım dikey hizalamada nadiren kullanılır. CSS ile Her Şey Nasıl Ortalanır hakkındaki yorumlarda Simon, dikey merkezleme için harika bir çözüm için bir jsFiddle örneğine bağlantı veriyor. İşte konuyla ilgili birkaç tane daha.

Yönteme daha yakından bakalım.

Avantajlar

• Çapraz tarayıcı (IE 8-10 dahil)
• Ekstra işaretleme yok, minimum stil
• uyarlanabilirlik
• bağımsızlık dolgu malzemesi(olmadan kutu boyutlandırma!)
• Görüntüler için çalışır

Dezavantajları

• Yükseklik belirtilmelidir (bkz. Değişken Yükseklik)
• ayarlanması önerilir taşma: otomatik içeriğin yayılmaması için
• Windows Phone'da çalışmıyor

Tarayıcı Uyumluluğu

Yöntem test edildi ve Chrome, Firefox, Safari, Mobile Safari ve hatta IE 8-10'da harika çalışıyor. Bir kullanıcı, içeriğin Windows Phone'da dikey olarak hizalanmadığından bahsetti.

konteynerin içinde

içeren bir kaba yerleştirilen içerik pozisyon: göreceli mükemmel şekilde hizalanacak:

Mutlak Merkez ( genişlik: %50; yükseklik: %50; taşma: otomatik; kenar boşluğu: otomatik; konum: mutlak; üst: 0; sol: 0; alt: 0; sağ: 0; )

Görünüm alanını kullanma

İçeriği konum olarak ayarlayın: sabit ve z-endeksini ayarlayın:

Absolute-Center.is-Fixed ( genişlik: %50; yükseklik: %50; taşma: otomatik; kenar boşluğu: otomatik; konum: sabit; üst: 0; sol: 0; alt: 0; sağ: 0; z-endeksi: 999 ;)

uyarlanabilirlik

Açıklanan yöntemin ana avantajı, yükseklik veya genişlik yüzde olarak ayarlandığında ve hatta anlaşıldığında harika çalışmasıdır. min-genişlik/maks-genişlik ve minimum yükseklik/maksimum yükseklik.

Absolute-Center.is-Responsive (genişlik: %60; yükseklik: %60; minimum genişlik: 400 piksel; maksimum genişlik: 500 piksel; dolgu: 40 piksel; taşma: otomatik; kenar boşluğu: otomatik; konum: mutlak; üst: 0; sol: 0; alt: 0; sağ: 0; )

Ofsetler

Sitenin sabit bir başlığı varsa veya başka bir girintiye ihtiyacı varsa, aşağıdaki gibi bir kod eklemeniz yeterlidir. üst: 70 piksel; ayarlıyken kenar boşluğu: otomatik; içerik bloğu, yükseklikte doğru şekilde ortalanacaktır.

Ayrıca, ortalamayı yükseklikte bırakarak içeriği istediğiniz tarafa hizalayabilirsiniz. Bunun için kullanmanız gerekir sağ: 0; sol: otomatik; doğru hizalama için veya sol: 0; sağ: otomatik; sola hizalama için.

Absolute-Center.is-Right ( genişlik: %50; yükseklik: %50; kenar boşluğu: otomatik; taşma: otomatik; konum: mutlak; üst: 0; sol: otomatik; alt: 0; sağ: 20 piksel; metin hizalama: sağ;)

çok içerik

Büyük miktarda içeriğin mizanpajın dağılmasına izin vermemesini sağlamak için taşma: otomatik. Dikey bir kaydırma görünecektir. Ayrıca ekleyebilirsiniz maksimum yükseklik: %100 içeriğin ekstra dolgusu yoksa.
.Absolute-Center.is-Overflow( genişlik: %50; yükseklik: 300 piksel; maksimum yükseklik: %100; marj: otomatik; taşma: otomatik; konum: mutlak; üst: 0; sol: 0; alt: 0; sağ : 0; )

Görüntüler

Yöntem, görüntüler için de harika çalışıyor! stil ekleyelim yükseklik: otomatik; resim kapsayıcıyla birlikte ölçeklenir.

Absolute-Center.is-Image (genişlik: %50; yükseklik: otomatik; kenar boşluğu: otomatik; konum: mutlak; üst: 0; sol: 0; alt: 0; sağ: 0; )

Değişken Yükseklik

Açıklanan yöntem, yüzde olarak belirtilebilen ve aşağıdakilerle kontrol edilebilen belirli bir blok yüksekliği gerektirir: maksimum yükseklik, bu da yöntemi duyarlı web siteleri için ideal hale getirir. Yüksekliği ayarlamamanın bir yolu kullanmaktır. ekran: tablo. Bu durumda içerik bloğu, boyutu ne olursa olsun ortalanır.

Tarayıcılar arası uyumlulukla ilgili sorunlar olabilir, belki de tablo-hücre yöntemini kullanmalısınız (aşağıda açıklanmıştır).

• Firefox/IE8: kullanım ekran: tablo bloğu dikey olarak belgenin üst kenarlığıyla hizalar.
• IE9/10: kullanım ekran: tablo bloğu sayfanın sol üst köşesine hizalar.
• Mobil Safari: genişlik yüzde olarak ayarlanırsa yatay merkezleme zarar görür

.Mutlak-Merkez.is-Değişken ( ekran: tablo; genişlik: %50; taşma: otomatik; kenar boşluğu: otomatik; konum: mutlak; üst: 0; sol: 0; alt: 0; sağ: 0; )

öbür metodlar

Açıklanan yöntem çoğu durumda iyi çalışır, ancak belirli sorunlara uygulanabilecek başka yöntemler de vardır.

negatif marj

Muhtemelen en popüler yol. Blok boyutları biliniyorsa uygundur.

Negatif ( genişlik: 300 piksel; yükseklik: 200 piksel; dolgu: 20 piksel; konum: mutlak; üst: %50; sol: %50; sol kenar boşluğu: -170 piksel; /* (genişlik + dolgu)/2 */ kenar boşluğu- top: -120px; /* (yükseklik + dolgu)/2 */ )
Avantajlar:

• Çapraz tarayıcı uyumluluğu
• Minimum kod

Dezavantajları:

• uyarlanabilir değil
• Kapta çok fazla içerik varsa düzen kayıyor
• Girintileri telafi etmeniz veya kullanmanız gerekir. kutu boyutlandırma: kenarlık kutusu

dönüşümü kullanma

En kolay yollardan biri, boy değişimini destekler. Bu konuda ayrıntılı bir makale var - CSS-Tricks tarafından yazılan "Yüzde Genişlik/Yükseklik Öğelerini Merkezleme".

Is-Transformed ( genişlik: %50; kenar boşluğu: otomatik; konum: mutlak; üst: %50; sol: %50; -webkit-transform: translate(-%50,-%50); -ms-transform: translate( -50%,-50%); dönüştürme: çevir(-50%,-50%)); )
Avantajlar:

• Değişken Yükseklik
• Minimum kod

Dezavantajları:

• IE 8'de çalışmıyor
• önekleri kullanma
• Diğer etkilere müdahale edebilir dönüştürmek
• İşleme sırasında bazı durumlarda kenarları bloke edin ve metin bulanıklığını giderin

Tablo hücresi

Muhtemelen en iyi ve en kolay yollardan biri. 456bereastreet tarafından yazılan "CSS ile esnek yükseklik dikey merkezleme, IE7'nin ötesinde" makalesinde ayrıntılı olarak açıklanmıştır. Ana dezavantaj ek işaretlemedir: üç unsur gereklidir:

CSS:
.Pos-Container.is-Table ( display: table; ) .is-Table .Table-Cell ( display: table-cell; dikey hizalama: orta; ) .is-Table .Center-Block (genişlik: %50; kenar boşluğu: 0 otomatik; )
Avantajlar:

• Değişken Yükseklik
• Düzen, blokta büyük miktarda metin varken çalışmıyor
• Çapraz tarayıcı uyumluluğu

Dezavantajları:

• karmaşık yapı

esnek kutu

CSS'nin geleceği olan flexbox, günümüzün düzen problemlerinin çoğunu çözecektir. Bununla ilgili daha fazla bilgiyi Flexbox ile Öğeleri Merkezleme başlıklı Smashing Magazine makalesinde okuyabilirsiniz.

Pos-Container.is-Flexbox ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; - moz-box-align: merkez; -ms-flex-align: merkez; -webkit-align-items: merkez; align-items: merkez; -webkit-box-pack: merkez; -moz-box-pack: merkez; -ms-flex-pack: merkez; -webkit-justify-content: merkez; justify-content: merkez; )
Avantajlar:

• İçerik herhangi bir yükseklik veya genişlikte olabilir
• Daha karmaşık durumlarda kullanılabilir

Dezavantajları:

• IE 8-9 için destek yok
• Vücutta kapsayıcı veya stiller gerektirir
• Modern tarayıcılarda düzgün çalışması için çok çeşitli önekler gerektirir
• Olası performans sorunları

Sonuç

Her yöntemin avantajları ve dezavantajları vardır. Temelde seçim, desteklenmesi gereken tarayıcıların seçimine bağlıdır.

Sayfadaki öğeleri hizalama görevi hakkında halihazırda kaç kopya kırılmıştır. Smashing Magazine - CSS'de Mutlak Yatay ve Dikey Merkezleme için Stephen Shaw'dan bu soruna bir çözüm içeren mükemmel bir makalenin çevirisini dikkatinize sunuyorum.

Hepimiz biliyorduk kenar boşluğu: 0 otomatik; yatay merkezleme için, ancak kenar boşluğu: otomatik; dikey için çalışmadı. Bu, yalnızca yüksekliği ayarlayarak ve aşağıdaki stilleri uygulayarak kolayca düzeltilebilir:

Mutlak Merkez ( kenar boşluğu: otomatik; konum: mutlak; üst: 0; sol: 0; alt: 0; sağ: 0; )
Bu çözümü ilk öneren ben değilim, ancak bu yaklaşım dikey hizalamada nadiren kullanılır. CSS ile Her Şey Nasıl Ortalanır hakkındaki yorumlarda Simon, dikey merkezleme için harika bir çözüm için bir jsFiddle örneğine bağlantı veriyor. İşte konuyla ilgili birkaç tane daha.

Yönteme daha yakından bakalım.

Avantajlar

• Çapraz tarayıcı (IE 8-10 dahil)
• Ekstra işaretleme yok, minimum stil
• uyarlanabilirlik
• bağımsızlık dolgu malzemesi(olmadan kutu boyutlandırma!)
• Görüntüler için çalışır

Dezavantajları

• Yükseklik belirtilmelidir (bkz. Değişken Yükseklik)
• ayarlanması önerilir taşma: otomatik içeriğin yayılmaması için
• Windows Phone'da çalışmıyor

Tarayıcı Uyumluluğu

Yöntem test edildi ve Chrome, Firefox, Safari, Mobile Safari ve hatta IE 8-10'da harika çalışıyor. Bir kullanıcı, içeriğin Windows Phone'da dikey olarak hizalanmadığından bahsetti.

konteynerin içinde

içeren bir kaba yerleştirilen içerik pozisyon: göreceli mükemmel şekilde hizalanacak:

Mutlak Merkez ( genişlik: %50; yükseklik: %50; taşma: otomatik; kenar boşluğu: otomatik; konum: mutlak; üst: 0; sol: 0; alt: 0; sağ: 0; )

Görünüm alanını kullanma

İçeriği konum olarak ayarlayın: sabit ve z-endeksini ayarlayın:

Absolute-Center.is-Fixed ( genişlik: %50; yükseklik: %50; taşma: otomatik; kenar boşluğu: otomatik; konum: sabit; üst: 0; sol: 0; alt: 0; sağ: 0; z-endeksi: 999 ;)

uyarlanabilirlik

Açıklanan yöntemin ana avantajı, yükseklik veya genişlik yüzde olarak ayarlandığında ve hatta anlaşıldığında harika çalışmasıdır. min-genişlik/maks-genişlik ve minimum yükseklik/maksimum yükseklik.

Absolute-Center.is-Responsive (genişlik: %60; yükseklik: %60; minimum genişlik: 400 piksel; maksimum genişlik: 500 piksel; dolgu: 40 piksel; taşma: otomatik; kenar boşluğu: otomatik; konum: mutlak; üst: 0; sol: 0; alt: 0; sağ: 0; )

Ofsetler

Sitenin sabit bir başlığı varsa veya başka bir girintiye ihtiyacı varsa, aşağıdaki gibi bir kod eklemeniz yeterlidir. üst: 70 piksel; ayarlıyken kenar boşluğu: otomatik; içerik bloğu, yükseklikte doğru şekilde ortalanacaktır.

Ayrıca, ortalamayı yükseklikte bırakarak içeriği istediğiniz tarafa hizalayabilirsiniz. Bunun için kullanmanız gerekir sağ: 0; sol: otomatik; doğru hizalama için veya sol: 0; sağ: otomatik; sola hizalama için.

Absolute-Center.is-Right ( genişlik: %50; yükseklik: %50; kenar boşluğu: otomatik; taşma: otomatik; konum: mutlak; üst: 0; sol: otomatik; alt: 0; sağ: 20 piksel; metin hizalama: sağ;)

çok içerik

Büyük miktarda içeriğin mizanpajın dağılmasına izin vermemesini sağlamak için taşma: otomatik. Dikey bir kaydırma görünecektir. Ayrıca ekleyebilirsiniz maksimum yükseklik: %100 içeriğin ekstra dolgusu yoksa.
.Absolute-Center.is-Overflow( genişlik: %50; yükseklik: 300 piksel; maksimum yükseklik: %100; marj: otomatik; taşma: otomatik; konum: mutlak; üst: 0; sol: 0; alt: 0; sağ : 0; )

Görüntüler

Yöntem, görüntüler için de harika çalışıyor! stil ekleyelim yükseklik: otomatik; resim kapsayıcıyla birlikte ölçeklenir.

Absolute-Center.is-Image (genişlik: %50; yükseklik: otomatik; kenar boşluğu: otomatik; konum: mutlak; üst: 0; sol: 0; alt: 0; sağ: 0; )

Değişken Yükseklik

Açıklanan yöntem, yüzde olarak belirtilebilen ve aşağıdakilerle kontrol edilebilen belirli bir blok yüksekliği gerektirir: maksimum yükseklik, bu da yöntemi duyarlı web siteleri için ideal hale getirir. Yüksekliği ayarlamamanın bir yolu kullanmaktır. ekran: tablo. Bu durumda içerik bloğu, boyutu ne olursa olsun ortalanır.

Tarayıcılar arası uyumlulukla ilgili sorunlar olabilir, belki de tablo-hücre yöntemini kullanmalısınız (aşağıda açıklanmıştır).

• Firefox/IE8: kullanım ekran: tablo bloğu dikey olarak belgenin üst kenarlığıyla hizalar.
• IE9/10: kullanım ekran: tablo bloğu sayfanın sol üst köşesine hizalar.
• Mobil Safari: genişlik yüzde olarak ayarlanırsa yatay merkezleme zarar görür

.Mutlak-Merkez.is-Değişken ( ekran: tablo; genişlik: %50; taşma: otomatik; kenar boşluğu: otomatik; konum: mutlak; üst: 0; sol: 0; alt: 0; sağ: 0; )

öbür metodlar

Açıklanan yöntem çoğu durumda iyi çalışır, ancak belirli sorunlara uygulanabilecek başka yöntemler de vardır.

negatif marj

Muhtemelen en popüler yol. Blok boyutları biliniyorsa uygundur.

Negatif ( genişlik: 300 piksel; yükseklik: 200 piksel; dolgu: 20 piksel; konum: mutlak; üst: %50; sol: %50; sol kenar boşluğu: -170 piksel; /* (genişlik + dolgu)/2 */ kenar boşluğu- top: -120px; /* (yükseklik + dolgu)/2 */ )
Avantajlar:

• Çapraz tarayıcı uyumluluğu
• Minimum kod

Dezavantajları:

• uyarlanabilir değil
• Kapta çok fazla içerik varsa düzen kayıyor
• Girintileri telafi etmeniz veya kullanmanız gerekir. kutu boyutlandırma: kenarlık kutusu

dönüşümü kullanma

En kolay yollardan biri, boy değişimini destekler. Bu konuda ayrıntılı bir makale var - CSS-Tricks tarafından yazılan "Yüzde Genişlik/Yükseklik Öğelerini Merkezleme".

Is-Transformed ( genişlik: %50; kenar boşluğu: otomatik; konum: mutlak; üst: %50; sol: %50; -webkit-transform: translate(-%50,-%50); -ms-transform: translate( -50%,-50%); dönüştürme: çevir(-50%,-50%)); )
Avantajlar:

• Değişken Yükseklik
• Minimum kod

Dezavantajları:

• IE 8'de çalışmıyor
• önekleri kullanma
• Diğer etkilere müdahale edebilir dönüştürmek
• İşleme sırasında bazı durumlarda kenarları bloke edin ve metin bulanıklığını giderin

Tablo hücresi

Muhtemelen en iyi ve en kolay yollardan biri. 456bereastreet tarafından yazılan "CSS ile esnek yükseklik dikey merkezleme, IE7'nin ötesinde" makalesinde ayrıntılı olarak açıklanmıştır. Ana dezavantaj ek işaretlemedir: üç unsur gereklidir:

CSS:
.Pos-Container.is-Table ( display: table; ) .is-Table .Table-Cell ( display: table-cell; dikey hizalama: orta; ) .is-Table .Center-Block (genişlik: %50; kenar boşluğu: 0 otomatik; )
Avantajlar:

• Değişken Yükseklik
• Düzen, blokta büyük miktarda metin varken çalışmıyor
• Çapraz tarayıcı uyumluluğu

Dezavantajları:

• karmaşık yapı

esnek kutu

CSS'nin geleceği olan flexbox, günümüzün düzen problemlerinin çoğunu çözecektir. Bununla ilgili daha fazla bilgiyi Flexbox ile Öğeleri Merkezleme başlıklı Smashing Magazine makalesinde okuyabilirsiniz.

Pos-Container.is-Flexbox ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; - moz-box-align: merkez; -ms-flex-align: merkez; -webkit-align-items: merkez; align-items: merkez; -webkit-box-pack: merkez; -moz-box-pack: merkez; -ms-flex-pack: merkez; -webkit-justify-content: merkez; justify-content: merkez; )
Avantajlar:

• İçerik herhangi bir yükseklik veya genişlikte olabilir
• Daha karmaşık durumlarda kullanılabilir

Dezavantajları:

• IE 8-9 için destek yok
• Vücutta kapsayıcı veya stiller gerektirir
• Modern tarayıcılarda düzgün çalışması için çok çeşitli önekler gerektirir
• Olası performans sorunları

Sonuç

Her yöntemin avantajları ve dezavantajları vardır. Temelde seçim, desteklenmesi gereken tarayıcıların seçimine bağlıdı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.

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

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

Amaç, iç öğeyi dış öğenin 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: mid 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

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

http://jsfiddle.net/c1bgffffq/1/

Bu çözümün bariz dezavantajı, anlambilim açısından hizalama için tabloların kullanılmasının yanlış olmasıdı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.

.outer-sarmalayıcı (ekran: tablo;) .outer (ekran: tablo-hücre;)
Bununla birlikte, dış blok, ortaya çıkan tüm sonuçları içeren bir tablo olarak kalacaktır.

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: 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

İç bloğun birden fazla metin satırı kaplamaması gerektiğini biliyorsanız, line-height özelliğini kullanabilir ve bunu 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; ) . 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ı

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

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

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

Bu yöntem yaygın olarak bilinir hale geldi ve çok sık kullanılıyor. Bir önceki gibi, dış bloğun yüksekliği bilinmeyip 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. 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

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; ) .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

Dikey olarak hizalamanın en modern yolu, Esnek Kutu Düzeni'ni (halk arasında Flexbox olarak bilinir) kullanmaktır. Bu modül, sayfadaki öğelerin konumunu esnek bir şekilde kontrol etmenizi ve neredeyse her yere yerleştirmenizi sağlar. Flexbox için merkez hizalama çok basit bir iştir.

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?

Sorunun ifadesinden devam etmek gerekir:

• 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.
• Bloğun yüksekliğinin bilinmediği daha karmaşık durumlar için 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.

Etiketler: Etiket ekle

Web sayfalarının düzenlenmesi sürecinde, blokları ortalama görevi oldukça yaygındır. Dikey veya yatay merkezleme olabilir.

Örneğin, sitenin sabit bir genişliği varsa, onu tarayıcı penceresinin ortasına hizalamak mantıklı olacaktır, çünkü. bu, metnin okunmasını kolaylaştırır (özellikle monitör büyükse). Bazı tasarımlar genellikle bloğun tarayıcı penceresinin ortasında, yani hem dikey hem de yatay merkezde bulunduğunu varsayar.

Öncelikle yatay merkezlemeden bahsedelim. En popüler teknik, bloğun sağ ve sol boyutlarını ayarlayarak merkezlenmesidir. kenar boşluğunu "otomatik" olarak. Diyelim ki bloğu id="container" 860px genişliğinde ortalamak istiyoruz. Bu durumda, CSS dosyasına şunları yazmanız gerekir:

#konteyner (
arkaplan rengi:#EEE;
genişlik:860 piksel;
kenar boşluğu:0pxotomatik;
}

Ancak, I.E. eski sürümler (örneğin 5.0) bu bloğu ortalamayacaktır. Tabii ki, artık kimse bu kadar eski tarayıcıları kullanmıyor (günlük ziyaretçilerimin 1800'ünden - sadece 1), ama her ihtimale karşı, orada da çalışmasını sağlamak daha iyi :)

Bunu yapmak için, ana öğe, yani içinde bloğumuzu ortaladığımız öğe (genellikle ana öğe BODY etiketidir), parametreyi ayarlamanız gerekir. metin hizalama: merkez. Bu durumda blok merkeze hizalanacak, ancak tüm içeriği de merkeze hizalanacak ve buna ihtiyacımız yok. Bu nedenle, bu bloğun içinde varsayılan hizalamayı ayarlıyoruz - metin hizalama:sol .

gövde (metin hizalama: merkez)

#konteyner (
arkaplan rengi:#EEE;
genişlik:860 piksel;
kenar boşluğu:0pxotomatik;
metin hizalama: sola;
}

Bir bloğu yatay olarak hizalamanın başka bir yolu da vardır. Muhtemelen bildiğiniz gibi, varsayılan olarak herhangi bir blok elemanı ana elemanın sol kenarına yerleştirilmiştir. Bu nedenle, onu merkeze hizalamak için ihtiyacınız olan:

2. Tarayıcı penceresinin genişliğinin %50'si kadar sağa taşıyın

3. Negatif bir girinti kullanarak, bloğun genişliğinin yarısına eşit bir mesafe kadar sola kaydırın.

Böylece blok merkezde olacaktır. Daha fazla netlik için aşağıdaki videoyu izleyin:

Örnek CSS kodu:

#konteyner (
arkaplan rengi:#559964;
konum:mutlak;
sol:%50;
sol kenar boşluğu: -430px;
genişlik:860 piksel;
}

Bloğu tarayıcı penceresine göre değil, örneğin başka bir bloğa göre konumlandırmak istiyorsanız, o zaman bu diğer blok için ayarlamanız gerektiğine dikkat edilmelidir. konum: göreli;

Ortaya hizalanması gereken #container bloğumuzun bir #wrap bloğunun içinde olduğunu varsayalım. Ardından kod şöyle görünecektir:

#wrap(konum:göreceli)

#konteyner (
arkaplan rengi:#559964;
konum:mutlak;
sol:%50;
sol kenar boşluğu: -430px;
genişlik:860 piksel;
}

Şimdi bloğu sayfanın ortasına hizalamamız gereken durumu ele alalım, yani. hem yatay hem de dikey merkezleme uygulayın. Burada yine konumlandırma uyguluyoruz. Yani, ihtiyacimiz var:

1. Bloğu mutlak konumlandırmaya ayarlayın

2. %50 sağa ve %50 aşağı kaydırarak sol üst köşesini tarayıcı penceresinin ortasına getirin.

3. Negatif bir girinti kullanarak, bloğun yüksekliğinin yarısına eşit bir mesafe yukarı ve bloğun genişliğinin yarısına eşit bir mesafe kadar sola kaydırın.

Böylece blok web sayfasının merkezinde olacaktır.

Diyelim ki bloğumuz 600px yüksekliğinde ve 860px genişliğinde. Ardından, CSS kodu şöyle görünecektir:

#konteyner (
arkaplan rengi:#559964;
pozisyon:mutlak;
üst:%50;
sol:%50;
kenar boşluğu: -300px;
sol kenar boşluğu: -430px;
yükseklik: 600 piksel;
genişlik:860 piksel;
}

Umarım prensibi anlamışsınızdır.

Bu derse oy ver: 1 2 3 4 5

Yorumlar:

Eğitimi ilk izleyen ben olacağım!

Eh... İkincisi =) Geçenlerde IE'de bu sorunla karşılaştım, çok çektim)) Teşekkürler =)

Teşekkürler, işaretli sayfa

Yeni dersler için çok teşekkürler Andrey!

Teşekkür ederim, burada eklenecek bir şey olmadığını düşünüyorum))

Ders için teşekkürler, sadece birkaç gün önce bunu yapmaya çalıştım, biraz acı çektim ve geçici olarak erteledim

Ve bir sorunum var: Mozille Firefox'taki site hizalamak istemiyor, sol kenara yapışmış ve bu kadar, yukarıdakilerin hiçbiri yardımcı olmuyor (Opera'da aynı).

ve neden çalışmıyor? - "bir bloğu tarayıcı penceresine göre değil, örneğin başka bir bloğa göre konumlandırmak istiyorsanız, bu diğer blok için konum: göreli olarak ayarlamanız gerekir."

Çok teşekkür ederim!! sadece DEVA teşekkürler! Tanrı sizi korusun!

Her şey yolunda, ancak nedense tüm görüntüler yalnızca tarayıcıyı güncelledikten sonra yerine oturuyor. Lütfen bana bunun neden olduğunu söyle?

Andrey, lütfen sitede bir arama ekleyin.

Yorum ekle.