CSS'de dikey olarak ortalamanın yolları. CSS'de öğelerin yatay ve dikey hizalanması

Çoğu zaman, düzenlerken, bir bloktaki metnin dikey olarak hizalanmasına ihtiyaç vardır. Bunun bir tablo hücresinde yapılması gerekiyorsa, dikey hizalama CSS özelliğinin değeri ayarlanır.

Ancak makul bir soru ortaya çıkıyor, sayfa işaretlemesini gereksiz etiketlerle aşırı yüklemeden tablo olmadan yapmak mümkün mü? Yanıt "yapabilirsin", ancak MSIE'deki zayıf CSS desteği nedeniyle, sorunun çözümü diğer yaygın tarayıcıların çözümünden farklı olacaktır.

Örnek olarak, aşağıdaki pasajı göz önünde bulundurun:

ve metni dikey olarak kutunun ortasına ve kutunun altına hizalamayı deneyin.

sorunun çözümü

"Uygun" tarayıcılar (MSIE dahil

Modern tarayıcıların çoğu CSS2.1'i, yani display özelliği için tablo-hücre değerini destekler. Bu bize, metin bloğunu bir tablo hücresi olarak görüntülenecek şekilde zorlama ve bunu kullanarak metni dikey olarak hizalama yeteneği verir:

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

div (
ekran: tablo hücresi;
dikey hizalama: alt;
}

Internet Explorer (sürüm 7 dahil)

Metni MSIE'de bir bloğun altına hizalama problemini çözmek için mutlak konumlandırmayı kullanabilirsiniz (burada bir bloğa yuvalanmış bir satır içi öğeye ihtiyacımız var):

div (
konum: göreli;
}
bölme aralığı(
Ekran bloğu;
pozisyon: mutlak;
alt: %0;
sol: %0
genişlik: %100
}

Bu kurallar dizisi "doğru" tarayıcılarda da çalışır.

özellikleri belirtin

div aralığı (
Ekran bloğu;
genişlik: %100
}

gerekli değildir, ancak dikey metin hizalamasına ek olarak yatay metin hizalamayı kullanmayı planlıyorsanız, örneğin text-align: center ; gibi, bunlara ihtiyaç duyulabilir.

Metni bloğun ortasına dikey olarak hizalamak için orijinal parçanın yine de karmaşık olması gerekir - hadi bir satır içi öğe daha ekleyelim:

Çalışma materyali:

• CSS'de Dikey Merkezleme (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
• CSS kullanarak dikey ortalama (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
• Dikey hizalama (www.cssplay.co.uk/ie/valign.html)
• dikey hizalama: orta (cssing.org.ua/2005/07/14/vertical-align-middle/)
• CSS'de dikey olarak hizalamanın başka bir yolu (cssing.org.ua/2007/04/26/another-css-valign-method)

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ı olmalı 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)” samimi bir proje ekibi tarafından hazırlandı.

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

Bu örnekte, yatay hizalama, align="center" etiket parametresi kullanılarak ayarlanmıştı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

Etiket için hücre içeriğinin üste hizalamasını belirtmek 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, bu nedenle farklı sütun yükseklikleri olması durumunda hizalamayı en üste ayarlamak 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. "Comment" etiketinin çok satırlı metnin üst kenarında yer alması için ilgili hücre valign özelliği kullanılarak üste hizalı olarak ayarlanır.

Bir web sayfası düzeni tasarlarken, muhtemelen bir div'i CSS kullanarak yatay ve dikey olarak ortalamanız gereken bir durumla karşılaşmışsınızdır. CSS ve jQuery'yi kullanmanın birkaç yolu vardır.

Ama önce temel bilgiler:

CSS ile yatay hizalama

sınıf adı(
kenar boşluğu:0 otomatik;
genişlik:200 piksel;
yükseklik:200 piksel;
}

Bir div'i yalnızca yatay olarak ortalamak için, bir genişlik ve sol ve sağ kenar boşlukları için otomatik bir değer belirtmeniz gerekir (bu, CSS özelliklerini yazmanın kısa bir biçimidir). Bu yöntem, blok elemanları (div, p, h1, vb.) üzerinde çalışır. Satır içi öğelere (köprüler ve resimler gibi) uygulamak için başka bir kural yazmanız gerekir - display:block .

CSS ile yatay ve dikey hizalama

Div'i aynı anda yatay ve dikey olarak ortalamak biraz daha zordur. Div'in boyutlarını önceden bilmeniz gerekir.

sınıf adı(
genişlik:300 piksel;
yükseklik:200 piksel;
pozisyon:mutlak;
sol:%50;
üst:%50;
kenar boşluğu:-100 piksel 0 0 -150 piksel;
}

Bir öğenin mutlak konumlandırılması ile onu akıştan çıkarabilir ve tarayıcı penceresine göre konumunu ayarlayabiliriz. Pencerenin solundan ve üstünden div ofsetini %50 olarak ayarlayarak sayfanın sol üst köşesini ortalıyoruz. Yapılması gereken tek şey, div'i genişliğinin ve yüksekliğinin yarısı kadar, negatif kenar boşluk değerleri ile mükemmel bir şekilde ortalanacak şekilde sola ve yukarı hareket ettirmektir.

JQuery ile yatay ve dikey hizalama

Belirtildiği gibi, yukarıdaki CSS yöntemi yalnızca sabit boyutlu div'lerde çalışır. jQuery kurtarmaya geliyor:

// işlev bildirimi:
$(pencere).resize(işlev()(
$(".sınıf-adı").css((
pozisyon:"mutlak",
sol: ($(window).width() - $(".class-name").outerWidth())/2,
top: ($(window).height() - $(".class-name").outerHeight())/2
});
});
// işlev çağrısı:
$(pencere).resize();

İşlev, kullanıcı pencereyi her yeniden boyutlandırdığında $(window).resize() içinde pencere genişliğini hesaplar. outerWidth() ve outerHeight() kullanıyoruz, çünkü normal width() ve height()'tan farklı olarak, dolgu ve kenarlık genişliği ekleyerek boyutu döndürürler. Son olarak, pencere yeniden boyutlandırmasına uyum sağlıyoruz ve div'i sayfa yeniden yüklemede ortalıyoruz.

Bir web sayfasındaki öğeleri hizalamak, özellikle metni dikey olarak hizalamak söz konusu olduğunda, o kadar kolay bir iş olmayabilir. Bu soru genellikle forumlarda bulunur ve acemi kullanıcıların bu sorunu çözmesi özellikle zordur. Ama aslında burada karmaşık bir şey yok. Tek gereken, CSS Basamaklı Stil Sayfaları hakkında biraz bilgi sahibi olmaktır. Bütün bunlar kuralları pahasına yapıldığından.

Metnin dikey hizalanması en az beş farklı şekilde gerçekleştirilebilir. Durumun koşulları ve ayrıntıları göz önüne alındığında, her biri kendi yolunda iyidir. Birkaç örneğe bakacağız ve koşullara göre kendinize uygun bir büyüme seçeceksiniz.

Satır yüksekliği ile ilk yöntem

İlk yöntem çok sıradan ve uygulamasını sınırlayan büyük bir dezavantajı var. Ama yine de, ne derse desin, yararlı olabilir ve hatta istenen sonucu getirebilir. Line-height özelliğini kullanarak satır yüksekliğini blok yüksekliğine uyacak şekilde ayarladığımız için bu koşullu hizalama olacaktır.

ilk örnek demo #1

/* #1 */ .talign1( border: 1px düz kırmızı; height:200px;/* blok yüksekliği */ ) .talign1 > p( line-height:200px;/* satır yüksekliğini blok yüksekliğine göre ayarla */ margin : 0;/* varsa dış dolguyu kaldır */ text-align:center;/* metni yatay olarak ortaya hizala */ padding: 0;/* varsa dolguyu kaldır */ ) /* end # 1*/

Tam olarak aynı şekilde, bir resmi dikeyin ortasına uygulamak mümkündür, ancak dikey hizalamanın yeni bir özelliği eklenerek: orta; .

Örnek. Demo #2

Örnek. Demo #2

/* #2 */ .talign2( border: 1px düz kırmızı; line-height:200px;/* blok satır yüksekliği */ ) .talign2 div( text-align:center;/* öğeleri yatay olarak merkeze hizala */ ) .talign2 img( Vertical-align:middle;/* görüntüleri dikey olarak ortalanmış olarak hizalayın */ border: 1px düz siyah; ) /* end #2*/

Konum özelliğiyle hizalama

Bu yöntem, bizim görevimiz de dahil olmak üzere birçok CSS görevinde yaygın olarak kullanılmaktadır. Ancak tamamen mükemmel olmadığı ve kendine has yan etkileri olduğu belirtilmelidir. Bunun nedeni, öğenin yüzde olarak verilen ortalamasının iç kutunun sol üst kenarına ortalanacak olmasıdır.

Bu nedenle, kenar boşlukları için negatif bir değer belirlemeniz gerekir. Üstteki dolgu, iç bloğun yüksekliğinin yarısı, soldaki dolgu ise genişliğin yarısı kadar olmalıdır. Böylece mutlak merkezi elde ederiz.

Bu değişkende, alt öğenin tam yüksekliğini ve genişliğini bilmek zorunlu olabilir. Aksi takdirde yanlış merkezleme meydana gelebilir.

/* #3 */ .talign3( kenarlık: 1px düz kırmızı; yükseklik:200px;/* blok yüksekliği */ konum: göreli; ) .talign3 div( konum: mutlak; üst: %50; sol: %50; yükseklik: %30; genişlik: %50; kenar boşluğu: -5% 0 0 -25%; kenarlık: 1px düz siyah; ) /* end #3*/

tablo özelliği ile hizalama

Burada eski tekniği kullanıyoruz, öğeleri hücrelerle bir tabloya dönüştürüyoruz. Bu durumda, tablo etiketleri

Örnek. demo #4

/* #4 */ .talign4( kenarlık: 1 piksel katı kırmızı; yükseklik:200 piksel;/* blok yüksekliği */ ekran: tablo; genişlik: %100; ) .talign4 div( ekran: tablo hücresi; dikey hizalama: orta ; text-align:center; ) /* end #4*/

flex özelliği ile hizalama

Bu, site düzeninde çok yaygın olmayan özelliklere sahip daha spesifik bir sürümdür. Ancak yine de, nadir durumlarda çok faydalıdırlar.