Bu tipyasaklı elemanların geçmesine izin verir.

Şimdi özelliğe geçelim hizalamak. Nesnelerin yatay hizalamasını ayarlar ve etiket bildiriminden sonra sığdırır. Genellikle içeriği sola hizalamak için kullanılabilir ( sol), sağ kenar boyunca ( Sağ), ortalanmış ( merkez) ve metin genişliğine göre ( savunmak).

Aşağıda resmi ve paragrafı merkeze yerleştireceğim bir örnek vereceğim.

Bu içerik ortalanacak.

Analiz ettiğimiz özelliğin resim için biraz farklı anlamlara sahip olduğunu lütfen unutmayın.

Kullandığım örnekte hizala = "orta". Bu sayede görüntü, cümle net bir şekilde resmin ortasında yer alacak şekilde hizalandı.

CSS'de ortalama araçları

Blokları, metni ve grafik içeriğini hizalamak için tasarlanan CSS özellikleri çok daha sık kullanılır. Bu öncelikle stillerin uygulanmasının rahatlığı ve esnekliğinden kaynaklanmaktadır.

O halde metin ortalamanın ilk özelliğiyle başlayalım; metin-hizalamak.

Hizalamayla aynı şekilde çalışır. Anahtar kelimeler arasından genel listeden birini seçebilir veya bir atanızın özelliklerini devralabilirsiniz ( miras almak).

Css3'te 2 parametre daha ayarlayabileceğinizi belirtmek isterim: başlangıç– metin yazma kurallarına bağlı olarak (sağdan sola veya tam tersi), hizalamayı sola veya sağa ayarlar (sol veya sağ çalışmaya benzer) ve son– başlamanın tersi (soldan sağa metin yazarken sağ, sağdan sola – sola yazarken işlev görür).

Size küçük bir numaradan bahsedeceğim. Bir değer seçerken savunmak son çizgi alttan çekici olmayan 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 elementin ana anahtar kelimelerini anlattım.

Girintiler

Ve son olarak paragraf girintilerine geliyoruz. CSS dili, adı verilen özel bir özelliği kullanır. metin girintisi.

Onun yardımıyla hem kırmızı çizgi hem de çıkıntı yapabilirsiniz (negatif bir değer belirtmeniz gerekir).

Her örneği pratikte deneyenleri takdir ediyorum. Blogumun bağlantılarını 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

CSS'de görünüşte basit olan bazı şeyleri yapmak o kadar kolay değildir. Bunlardan biri hizalamadır, yani. bir öğenin diğerine göre belirli bir şekilde konumlandırılması gerektiğinde.

Bu makalede, elemanların yatay ve/veya dikey olarak merkezlenmesi işini basitleştirmeye yardımcı olacak bazı hazır çözümler sunulmaktadır.

Not: Her çözümün altında, belirtilen CSS kodunun çalıştığı sürümleri gösteren bir tarayıcı listesi bulunur.

CSS - Ortaya Hizalama Bloğu

1. Bir bloğu diğerinin merkezine hizalamak. Bu durumda birinci ve ikinci bloklar dinamik boyutlara sahiptir.

Parent ( pozisyon: göreceli; ) .child ( pozisyon: mutlak; sol: %50; üst: %50; -webkit-transform: Translate(-%50, -%50); -moz-transform: Translate(-%50) , -%50); -ms-transform: tercüme et(-%50, -%50); -o-transform: tercüme et(-%50, -%50);

• Chrome 4.0+
• Firefox 3.6+
• İnternet Explorer 9+
• Opera 10.5+
• Safari 3.1+

2. Bir bloğu diğerinin merkezine hizalamak. Bu durumda ikinci bloğun boyutları sabittir.

Parent ( pozisyon: göreceli; ) .çocuk ( pozisyon: mutlak; sol: %50; üst: %50; /* 2 bloğun genişliği ve yüksekliği */ genişlik: 500 piksel; yükseklik: 250 piksel; /* Değerler bağlı olarak belirlenir boyutunda */ /* marj-sol = - genişlik / 2 */ kenar boşluğu-sol: -250px; /* kenar boşluğu-top = - yükseklik / 2 */ kenar boşluğu-top: -125px )

Bu çözümü destekleyen tarayıcılar:

• Chrome 1.0+
• Firefox1.0+
• Internet Explorer4.0+
• Opera 7.0+
• Safari 1.0+

3. Bir bloğu diğerinin merkezine hizalamak. Bu durumda ikinci bloğun yüzde olarak belirtilen boyutları vardır.

Parent ( pozisyon: göreceli; ) .çocuk ( pozisyon: mutlak; /* 2 bloğun % cinsinden genişlik ve yüksekliği */ yükseklik: %50; genişlik: %50; /* Değerler % cinsinden boyutuna göre belirlenir * / sol: %25; /* (%100 - genişlik) / 2 */ üst: %25; /* (%100 - yükseklik) / 2 */ )

Bu çözümü destekleyen tarayıcılar:

• Chrome 1.0+
• Firefox1.0+
• Internet Explorer4.0+
• Opera 7.0+
• Safari 1.0+

CSS - Yatay Hizalama

1. Bir blok öğesinin (ekran: blok) diğerine (bulunduğu yere) göre yatay olarak hizalanması:

Blok (sol kenar boşluğu: otomatik; sağ kenar boşluğu: otomatik; )

Bu çözümü destekleyen tarayıcılar:

• Chrome 1.0+
• Firefox1.0+
• Internet Explorer 6.0+
• Opera 3.5+
• Safari 1.0+

2. Bir çizgi (ekran: satır içi) veya satır bloğu (ekran: satır içi blok) öğesini yatay olarak hizalayın:

Parent ( text-align: center; ) .child ( display: inline-block; )

Bu çözümü destekleyen tarayıcılar:

• Chrome 1.0+
• Firefox3.0+
• Internet Explorer8.0+
• Opera 7.0+
• Safari 1.0+

CSS - Dikey Hizalama

1. Bir öğeyi (ekran: satır içi, ekran: satır içi blok) diğerine (bulunduğu yere) göre ortalayın. Bu örnekteki ana blok, CSS line-height özelliği kullanılarak ayarlanan sabit bir yüksekliğe sahiptir.

Parent ( line-height: 500px; ) .child ( display: inline-block; dikey hizalama: orta; )

Bu çözümü destekleyen tarayıcılar:

• Chrome 1.0+
• Firefox3.0+
• Internet Explorer8.0+
• Opera 7.0+
• Safari 1.0+

2. Ebeveyni bir tablo olarak ve çocuğu bu tablonun bir hücresi olarak temsil ederek bir bloğu diğerine göre dikey olarak ortalamak.

Parent ( display: table; ) .child ( display: table-cell; dikey hizalama: orta; )

Bu çözümü destekleyen tarayıcılar:

• Chrome 1.0+
• Firefox1.0+
• Internet Explorer8.0+
• Opera 7.5+
• Safari 1.0+

Başka ilginç püf noktaları veya kullanışlı hazır hizalama çözümleri biliyorsanız, bunları yorumlarda paylaşın.

Vlad Merjeviç

Tablo hücrelerinin içeriğinin aynı anda hem yatay hem de dikey olarak hizalanabilmesi nedeniyle, elemanların birbirlerine göre konumlarının kontrol edilmesi olanakları genişletilir. Tablolar, resimlerin, metnin, form alanlarının ve diğer öğelerin birbirine ve bir bütün olarak web sayfasına göre hizalamasını ayarlamanıza olanak tanır. Genel olarak hizalama, farklı öğeler arasında görsel bağlantılar kurmak ve bunları bir arada gruplamak için gereklidir.

Dikey merkezleme

Ziyaretçiye sitenin odağını ve adını göstermenin bir yolu açılış sayfası kullanmaktır. Bu, kural olarak bir flaş açılış ekranının veya sitenin ana fikrini ifade eden bir resmin bulunduğu ilk sayfadır. Resim aynı zamanda sitenin diğer bölümlerine de bir bağlantıdır. Monitör çözünürlüğü ne olursa olsun bu görüntüyü tarayıcı penceresinin ortasına yerleştirmeniz gerekir. Bu amaçla genişliği ve yüksekliği %100 olan bir masa kullanabilirsiniz (örnek 1).

Örnek 1: Çizimi ortalamak

Bu örnekte yatay hizalama, align="center" etiket parametresi kullanılarak ayarlanır. ve hücrenin içeriği varsayılan konum olduğundan dikey olarak ortalanmayabilir.

Tablo yüksekliğini %100'e ayarlamak için kaldırmanız gerekir., kodun geçerliliği sona erer.

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

Yatay hizalama

Etiketin hizalama (yatay hizalama) ve valign (dikey hizalama) niteliklerini birleştirerek , elemanların birbirine göre çeşitli konumlarının ayarlanmasına izin verilir. İncirde. Şekil 1, elemanları yatay olarak hizalamanın yollarını göstermektedir.

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

Üst Hizalama

Bir etiket için hücre içeriğinin üst hizalamasını belirtmek için valign niteliğini top değeriyle ayarlamanız gerekir (örnek 2).

Örnek 2: Valign'ı kullanma

Bu örnekte hücre özellikleri etiket parametreleri kullanılarak kontrol ediliyor , ancak stiller arasında geçiş yapmak da daha uygundur.

Özellikle hücrelerdeki hizalama, dikey hizalama ve metin hizalama özellikleriyle belirtilir (örnek 3).

Kodu kısaltmak için bu örnekte, dikey hizalama ve dolgu özellikleri iki hücreye aynı anda uygulandığından seçicilerin gruplandırılması kullanılmaktadır.

Alt hizalama da aynı şekilde yapılır ancak üst değer yerine alt değer kullanılır.

Orta hizalama

Varsayılan olarak, hücre içerikleri dikey çizgilerinin merkezine hizalanır; dolayısıyla sütunların yükseklikleri farklıysa hizalamayı üst kenara ayarlamanız gerekir.

Bazen, örneğin Şekil 2'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ğ kenarda bulunur. Öğeleri bu şekilde düzenlemek için üç hücreli bir tabloya ihtiyacınız olacak. Dış hücreler aynı boyutlara sahip olmalı, orta hücrede hizalama ortalanmalı ve sağ hücrede sağ kenar boyunca olmalıdır (örnek 4). Formülün merkezde konumlandırılmasını sağlamak için bu hücre sayısı gereklidir.

(18.6)

Örnek 4: Formül Hizalaması

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

Form Öğelerini Hizalama

Tabloları kullanarak, form alanlarının konumunu, özellikle de metinle serpiştirildiklerinde belirlemek uygundur. 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 hizalandığından ve form öğelerinin de sola hizalandığından emin olmak için görünmez kenarlığı ve iki sütunu olan bir tabloya ihtiyacınız olacaktır. Sol sütun metnin kendisini, sağ sütun ise metin alanlarını içerecektir (örnek 5).

Yorum ekle

Bu örnekte sağa hizalamanın gerekli olduğu hücreler için align="right" özelliği eklenmiştir. Yorum etiketinin çok satırlı metnin en üstünde konumlandırılmasını sağlamak için, karşılık gelen hücre, valign özelliği kullanılarak üste hizalanacak şekilde ayarlanır..

Bugün sevgili okuyucu, bir bloktaki dikey hizalama problemini ele alacağız. div Büyük olasılıkla harika bir CSS özelliğinin varlığını zaten biliyorsunuzdur

dikey hizalama. Ve Tanrı'nın kendisi bize bu özelliği dikey hizalama için kullanmamızı emretti (bu kadar açıklayıcı bir isme sahip olması boşuna değil).

Ş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 yanıltmayı yapmaktır:

Bu ifadeye inanmak için her türlü neden var İçeriği engelle div kabının merkez yüksekliğine hizalanacaktır.

Ama orada değildi! Bu şekilde beklenen herhangi bir merkez hizalamasını elde edemeyiz. Ve neden? Görünüşe göre her şey doğru bir şekilde belirtilmiş. Sorunun 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.

Bir tablo hücresinin içindeki hizalamaya ilişkin her şeyin açık olduğunu düşünüyorum. Ancak satır içi öğelerle başka bir durumu açıklayacağım.

Satır içi elemanların dikey hizalanması

Satır etiketleriyle bölünmüş bir metin satırınız olduğunu varsayalım. parçalara:

Sen hoş karşılıyor parça metin!

Satır içi etiket, görünümü içeriğin yeni bir satıra kaydırılmasına neden olmayan bir kapsayıcıdır.

Bir blok etiketinin eylemi, kabın içeriğinin yeni bir satıra sarılmasına neden olur.

bir blok etiketidir. Metin parçalarını bloklar halinde kapatırsak

, o zaman her biri yeni bir hatta olacak. Etiket kullanma , farklı olarak

, küçük harftir, konteynerler yeni bir satıra taşınmayacaktır, tüm konteynerler tek satırda kalacaktır.

Konteyner Metnin bir bölümünü özel biçimlendirmeyle belirtirken (renkle, farklı bir yazı tipiyle vb. vurgulayarak) kullanımı uygundur.

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

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

Ortaya çıkan metin satırı şöyle görünecektir:

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

Biraz dikkatimiz dağıldı, şimdi asıl görevimize dönüyoruz.

div kapsayıcısında dikey hizalama

Ne olursa olsun, div kapsayıcısı içindeki hizalama için bu ö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 kabında hizalama bizim için uygun değildir); geriye kalan tek şey bu gerçeği kullanmaktır dikey hizalama masa hücreleri için çalışır.

Bunu nasıl kullanabiliriz? Masamız yok, div konteyneriyle çalışıyoruz.

Ha, çok basit olduğu ortaya çıktı.

CSS özelliği görüntülemek div bloğumuzu bir tablo hücresine dönüştürmenize olanak tanır, bu kolayca ve doğal bir şekilde yapılabilir:

Diyelim ki bir sınıf div'imiz var Metin hizalama:

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

Textalign( görüntü: tablo hücresi; )

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

Ancak her şey bu kadar basit bitemez. Harika bir IE tarayıcımız var. Mülkle nasıl çalışılacağını bilmiyor ekran: masa hücresi(Bu CSS özelliğinin farklı tarayıcılardaki işlevselliğini gösteren tabloyu htmlbook.ru web sitesinde okumanızı öneririm). Bu nedenle çeşitli hilelere başvurmak zorunda kalacağız.

Tüm tarayıcılar için bir div kapsayıcısında hizalama sağlamanın birçok yolu vardır:

• Ek bir yardımcı div konteyneri kullanan yöntem
• İfadeyi kullanan yöntem. Blok yüksekliklerinin zorlu bir hesaplamasıyla bağlantılıdır. Bunu JavaScript bilgisi olmadan yapamazsınız.
• Line-height özelliğini kullanma. Bu yöntem yalnızca yüksekliği bilinen bir bloğun dikey hizalanması için uygundur ve bu nedenle genel durumda uygulanamaz.
• IE tarayıcısı durumunda mutlak ve göreceli içerik dengelemesinin kullanılması. Bu yöntem bana en anlaşılır ve basit görünüyor. Ek olarak, değişken yükseklikteki div konteyneri için de uygulanabilir. Bunun üzerinde daha ayrıntılı olarak duracağız.

Anladığınız gibi, IE'deki özelliğin yanlış anlaşılmasından kaynaklanan dikey hizalama sorununu çözmemiz gerekiyor. ekran: masa hücresi(ne IE6, ne IE7, ne de IE8 bu özelliğe aşina değilim). Bu nedenle, kullanarak koşullu yorum IE tarayıcılarına özel olarak farklı CSS özellikleri belirleyeceğiz.

Koşullu yorum

İnşaat türü:

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

buna koşullu yorum denir (dikkatli olun, koşullu yorumun türü bir boşluk kalacak şekilde verilen örneğe tamamen uygun olmalıdır).

Böyle bir koşullu yorumda yer alan talimatlar, yalnızca bu kodu yorumlayan tarayıcının IE ailesine ait olması durumunda yürütülecektir.

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

Sorunun çözümü

Tüm bu maydanoz nedeniyle HTML kodumuza iki ek kap sağlamamız gerekecek. Metin bloğumuz şöyle görünecek:

Sınıf div kabı için Metin hizalama CSS özellikleri, içeriğini tüm normal tarayıcılar için (tabii ki IE hariç) dikey olarak hizalayacak şekilde ayarlanmıştır:

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 dikeye göre ortalanmış olarak hizalamak için yeterlidir. IE hariç.

Şimdi hizalamayla ilgili özellikleri eklemeye başlıyoruz IE ailesindeki tarayıcılar için(onlar için ek bloklar kullandık Yorum etiketinin çok satırlı metnin en üstünde konumlandırılmasını sağlamak için, karşılık gelen hücre, valign özelliği kullanılarak üste hizalanacak şekilde ayarlanır. Ve açıklık):

Etikete atıfta bulunarak Yorum etiketinin çok satırlı metnin en üstünde konumlandırılmasını sağlamak için, karşılık gelen hücre, valign özelliği kullanılarak üste hizalanacak şekilde ayarlanır. bir sınıf bloğunun içinde Metin hizalama. Bunu yapmak için önce sınıfın adını ve ardından eriştiğimiz etiketi boşlukla ayırarak belirtmeniz gerekir.

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

Bu tasarım şu anlama gelir: sınıf içeren bir blok içindeki tüm div etiketleri için Metin hizalama listelenen özellikleri uygulayın.

Buna göre blok için belirlenen stiller Metin hizalama değiştirildi:

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

Artık metin bloğunun sol üst noktası %50 aşağı kaydırılmıştır.

Neler olduğunu açıklamak için bir örnek çizdim:

Resimden de görebileceğiniz gibi, bir miktar ilerleme kaydettik. Ama hepsi bu değil! Sarı bloğun sol üst noktası aslında ana (mor) bloğa göre %50 aşağı doğru hareket etti. Ancak mor bloğun yüksekliğinin yüzde ellisine ihtiyacımız var. sarı bloğun merkezi, sol üst noktası değil.

Artık etiket devreye girecek açıklık ve göreceli konumu:

Textalign span( konum: göreceli; üst: -50%; )

Böylece sarı bloğu başlangıç ​​konumuna göre yüksekliğinin %50'si kadar yukarı kaydırdık. Anladığınız gibi sarı bloğun yüksekliği, ortalanan içeriğin yüksekliğine eşittir. Span kapsayıcısındaki son işlem içeriğimizi mor bloğun ortasına yerleştirdi. Yaşasın!

Hadi biraz hile oynayalım

Öncelikle maydanozu tüm normal tarayıcılardan gizleyip IE için açmamız gerekiyor. Bu elbette koşullu bir yorum kullanılarak yapılabilir; onunla tanışmamız boşuna değil:

Küçük bir sorun var. Ortalanan içerik çok yüksekse, bu hoş olmayan sonuçlara yol açar: dikey kaydırma için ekstra bir yükseklik vardır.

Problemin çözümü: bir özellik eklemeniz gerekiyor taşma: gizli engellemek Metin hizalama.

Gayrimenkulü detaylı olarak tanıyın taşma içinde mümkündür.

Bloğun son CSS talimatları Metin hizalamaşu forma sahiptir:

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

Kusura bakmayın, önemli bir noktaya değinmeyi unuttum. Eğer denersen sınıf bloğunun yüksekliğini ayarlayın Metin hizalama yüzde olarak, o zaman hiçbir şey işe yaramayacak.

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

Çoğu zaman bir sınıf bloğunun yüksekliğini ayarlamaya ihtiyaç duyulur Metin hizalama piksel cinsinden değil, ana bloğun yüksekliğinin yüzdesi olarak ve div kabının içeriğini ortaya hizalayın.

İşin püf noktası, bunu bir tablo hücresi için yapmanın imkansız olmasıdır (ancak sınıf bloğu Metin hizalamaözelliği sayesinde tam olarak bir masa 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 bunun için yüksekliğin yüzde değerini ayarlayın. Daha sonra CSS direktifiyle blok içine yerleştirildi ekran:tablo hücresi, ana bloğun yüksekliğini mutlu bir şekilde devralacaktır.

Örneğimizde değişken yükseklik bloğu uygulamak için CSS'yi biraz düzenleyeceğiz:

sınıfa Metin hizalama mülkün değerini değiştireceğiz görüntülemekİle masa hücresi Açık masa ve hizalama direktifini kaldırın dikey hizalama: orta. Artık yükseklik değerini 500 pikselden %100'e güvenle değiştirebiliriz.

Yani sınıf bloğunun CSS özellikleri Metin hizalamaşöyle görünecek:

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

Geriye kalan tek şey içerik merkezlemeyi uygulamaktır. Bunu yapmak için sınıf bloğuna yuvalanmış bir div kapsayıcısı Metin hizalama(bu resimdeki sarı bloğun aynısıdır), CSS özelliğini ayarlamanız gerekir ekran:tablo hücresi, o zaman ana bloktan %100 yüksekliğini devralır Metin hizalama(mor blok). Ve hiçbir şey bizi merkezdeki iç içe geçmiş div kabının içeriğini özellik ile hizalamaktan alıkoyamaz. dikey hizalama: orta.

Kapta yuvalanmış div bloğu için CSS özelliklerinin başka bir ek listesini alıyoruz Metin hizalama.

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

Bütün hile bu. İstenirse içerik ortalanmış olarak değişken bir yüksekliğe sahip olabilirsiniz.

Değişken yükseklikteki bloğun dikey hizalanması hakkında daha fazla bilgi için bkz.