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

1.2. Blok başka bir blokta yuvalanmışsa ve bunun için genişlik ayarlanmamışsa/ayarlanmamışsa:

.wrapper (metin hizalama: orta;)

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

.wrapper (konum: göreceli; / * daha sonra kutunun kesinlikle içine yerleştirilebilmesi için ana kutu için göreceli konumlandırmayı ayarlayın * /) .box (genişlik: 400 piksel; konum: mutlak; sol: %50; sol kenar boşluğu : -200px; / * bloğu genişliğinin yarısı kadar sola kaydır * /)

1.4. Bloklar için genişlik belirtilmemişse, üst sarmalayıcı bloğunu kullanarak ortalayabilirsiniz:

.wrapper (metin hizalama: merkez; / * bloğun içeriğini merkeze yerleştirin * /) .box (ekran: satır içi blok; / * blokları yatay olarak sıralayın * / kenar boşluğu: -0.25em ; / * bloklar arasındaki sağ girintiyi kaldırın * /)

2. Dikey hizalama

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

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

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

2.4. Bir bloğun genişliği ve yüksekliği varsa ve ana blokta 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; / * ile içerik sürünmedi * /)

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

eleman boyutlandırılmışsa

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

eleman boyutlandırılmamışsa ve boş değilse

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

Her düzen tasarımcısı sürekli olarak içeriği bir blokta yatay veya dikey olarak hizalama ihtiyacıyla karşı karşıyadır. Bu konuda birkaç iyi makale var, ancak hepsi birçok ilginç, ancak birkaç pratik seçenek sunuyor, bu yüzden ana şeyi vurgulamak için fazladan zaman harcamanız gerekiyor. Artık google'da aramamak için bu bilgileri benim için uygun olan formda göndermeye karar verdim.

Blokları Bilinen Boyutlarla Hizalama

CSS'yi kullanmanın en kolay yolu, önceden belirlenmiş bir yüksekliğe (dikey hizalama için) veya genişliğe (yatay hizalama için) sahip blokları hizalamaktır.

Dolgu ile hizalama

Bazen bir öğeyi ortalayamazsınız, ancak ona " ile kenarlıklar ekleyebilirsiniz. dolgu malzemesi".

Örneğin 200x200px bir resminiz varsa, 240x300 blokta ortalamak istiyorsunuz.Dış kutunun yüksekliğini ve genişliğini 200px olarak ayarlayıp, üstte ve altta 20px, solda 50'şer adet ekleyebiliriz. sağ.

.example-wrapper1 (arka plan: # 535E73; genişlik: 200 piksel; yükseklik: 200 piksel; dolgu: 20 piksel 50 piksel;)

Kesinlikle konumlandırılmış kutuları hizalama

Blok "olarak ayarlanmışsa pozisyon: mutlak", daha sonra en yakın ebeveyne göreli olarak" konum: göreceli " ile konumlandırılabilir. Bunun için tüm özelliklerin (" Tepe","sağ","alt","sol") aynı değeri iç üniteye ve ayrıca" kenar boşluğu: otomatik "a atayın.

* Bir nüans var: İç bloğun genişliği (yüksekliği) + sol (sağ, alt, üst) değeri ana bloğun boyutunu geçmemelidir. Sol (sağ, alt, üst) özelliklerini 0 (sıfır) olarak ayarlamak daha güvenlidir.

.example-wrapper2 (konum: göreli; yükseklik: 250 piksel; arka plan: url (boşluk.jpg);) .cat-king (genişlik: 200 piksel; yükseklik: 200 piksel; konum: mutlak; üst: 0; sol: 0; alt: 0; sağ: 0; kenar boşluğu: otomatik; arka plan: url (king.png);)

Yatay hizalama

"Metin hizalama: merkez" ile hizalayın

Bir bloktaki metni hizalamak için özel bir özellik var " Metin hizalama". Değer ayarlandığında" merkez"metnin her satırı yatay olarak hizalanacaktır. Çok satırlı metinler için bu çözüm çok nadiren kullanılır, daha sık olarak bu seçenek açıklıkları, bağlantıları veya görüntüleri hizalamak için bulunabilir.

Bir keresinde CSS ile metin hizalamanın nasıl çalıştığını göstermek için bir metin bulmam gerekti ama aklıma ilginç bir şey gelmedi. İlk başta bir tekerlemeyi bir yere kopyalamaya karar verdim, ancak bunun makalenin benzersizliğini bozabileceğini ve sevgili okuyucularımızın Google'da bulamayacağını hatırladım. Ve sonra bu paragrafı buraya yazmaya karar verdim - sonuçta mesele onunla değil, nokta aynı hizada.

.example-text (metin hizalama: merkez; dolgu: 10 piksel; arka plan: # FF90B8;)

Bu özelliğin yalnızca metin için değil, aynı zamanda herhangi bir satır içi öğe ("ekran: satır içi") için de çalışacağına dikkat edilmelidir.

Ancak bu metin sola hizalanmıştır, ancak sarıcıya göre ortalanmış olan bloktadır.

.example-wrapper3 (metin hizalama: merkez; arka plan: # FF90B8;) .inline-text (ekran: satır içi blok; genişlik: %40; dolgu: 10 piksel; metin hizalama: sol; arka plan: # FFE Загрузка;)

Kutuları kenar boşluklarıyla hizalama

Genişliği bilinen blok öğeleri, "sol kenar boşluğu: otomatik; kenar boşluğu sağ: otomatik" olarak ayarlanırsa yatay olarak kolayca hizalanır. Kısaltılmış gösterim genellikle kullanılır: " kenar boşluğu: 0 otomatik"(sıfır yerine herhangi bir değer kullanılabilir). Ancak bu yöntem dikey hizalama için çalışmayacaktır.

.lama-sarmalayıcı (yükseklik: 200 piksel; arka plan: # F1BF88;) .lama1 (yükseklik: 200 piksel; genişlik: 200 piksel; arka plan: url (lama.jpg); kenar boşluğu: 0 otomatik;)

Bu, mümkün olduğunda (sabit veya mutlak konumlandırmanın gerekli olmadığı durumlarda) tüm blokları hizalamaya değerdir - en mantıklı ve yeterlidir. Her ne kadar bariz görünse de bazen olumsuz marjlarla ürkütücü örnekler gördüm, bu yüzden açıklığa kavuşturmaya karar verdim.

Dikey hizalama

Dikey hizalamayla ilgili daha birçok sorun var - görünüşe göre bu CSS'de sağlanmamıştı. İstenilen sonuca ulaşmanın birkaç yolu vardır, ancak hepsi çok hoş değildir.

line-height özelliğiyle hizalama

Bir blokta yalnızca bir satır olması durumunda, dikey hizalamasını " satır yüksekliği"ve istenen yüksekliğe ayarlamak. Güvenilirlik için, değeri "line-height" değerine eşit olacak "high" ayarına da değer, çünkü ikincisi tüm tarayıcılarda desteklenmez.

.example-wrapper4 (satır yüksekliği: 100 piksel; renk: # DC09C0; arka plan: # E5DAE1; yükseklik: 100 piksel; metin hizalama: merkez;)

Birden çok satırla blok hizalaması elde etmek de mümkündür. Bunu yapmak için ek bir sarmalayıcı blok kullanmanız ve satır yüksekliğini buna ayarlamanız gerekir. İç blok çok satırlı olabilir, ancak "satır içi" gereklidir. Buna "dikey hizalama: orta" uygulamanız gerekir.

.example-wrapper5 (satır yüksekliği: 160 piksel; yükseklik: 160 piksel; yazı tipi boyutu: 0; arka plan: # FF9B00;) .example-wrapper5 .text1 (görüntüleme: satır içi blok; yazı tipi boyutu: 14 piksel; satır yüksekliği: 1.5; dikey hizalama: orta; arka plan: # FFFAF2; renk: # FF9B00; metin hizalama: orta;)

Sarıcı blok "font-size: 0" ayarlı olmalıdır. Yazı tipi boyutunu sıfıra ayarlamazsanız, tarayıcı kendisinden birkaç piksel daha ekleyecektir. Bu özellikler üst öğeden miras alındığından, iç blok için yazı tipi boyutunu ve satır yüksekliğini de belirtmeniz gerekecektir.

Tablolarda dikey hizalama

Mülk " dikey hizalama"tablo hücrelerini de etkiler. "Orta" değeri ayarlandığında, hücrenin içindeki içerik ortalanır. Tabii ki, tablo düzeni bugünlerde arkaik olarak kabul edilir, ancak istisnai durumlarda bunu belirterek simüle edebilirsiniz" ekran: tablo hücresi".

Bu seçeneği genellikle dikey hizalama için kullanırım. Aşağıda hazır bir projeden alınmış bir yerleşim örneği verilmiştir. Bu şekilde dikey olarak ortalanmış olan resim ilgi çekicidir.

.one_product .img_wrapper (ekran: tablo hücresi; yükseklik: 169 piksel; dikey hizalama: orta; taşma: gizli; arka plan: #fff; genişlik: 255 piksel;) .one_product img (maksimum yükseklik: 169 piksel; maksimum genişlik: 100 %; minimum genişlik: 140 piksel; ekran: blok; kenar boşluğu: 0 otomatik;)

Unutulmamalıdır ki, bir öğenin "yok" dışında "kayan" özelliği varsa, o zaman her durumda blok olacaktır (ekran: blok) - o zaman ek bir sarmalayıcı blok kullanmanız gerekecektir.

Ek bir satır içi öğeyle hizalama

Ve satır içi öğeler için uygulayabilirsiniz " dikey hizalama: orta". Bu durumda, tüm öğeler ile" ekran: satır içi"aynı çizgide olanlar ortak merkez çizgisiyle hizalanacaktır.

Ana bloğun yüksekliğine eşit yükseklikte bir yardımcı blok oluşturmanız gerekir, ardından istenen blok ortalanacaktır. Bunun için: Before or: after sözde öğelerini kullanmak uygundur.

.example-wrapper6 (yükseklik: 300 piksel; metin hizalama: merkez; arka plan: # 70DAF1;) .pudge (görüntüleme: satır içi blok; dikey hizalama: orta; arka plan: url (pudge.png); arka plan rengi: # fff; genişlik: 200 piksel; yükseklik: 200 piksel;) .riki (ekran: satır içi blok; yükseklik: %100; dikey hizalama: orta;)

Ekran: esnet ve hizala

Explorer 8 kullanıcılarını çok fazla umursamıyorsanız veya onların iyiliği için fazladan javascript eklemeye hazır olduğunuza o kadar önem veriyorsanız, o zaman "display: flex" kullanabilirsiniz. Esnek kutular, hizalama sorunlarıyla harika bir iş çıkarır ve içindeki içeriği ortalamak için "margin: auto" yazmanız yeterlidir.

Şimdiye kadar, bu yöntemle pratik olarak karşılaşmadım, ancak bunun için özel bir kısıtlama yok.

.example-wrapper7 (ekran: esnek; yükseklik: 300 piksel; arka plan: # AEB96A;) .example-wrapper7 img (kenar boşluğu: otomatik;)

CSS hizalaması hakkında yazmak istediğim tek şey bu. Artık içeriği ortalamak sorun olmayacak!

Bir web sitesinde veya sayfada olduğu gibi çeşitli öğeleri hizalamak, başlangıçta metnin dikey hizalamasını sallayan biri için zor bir iştir. İşin garibi, CSS kullanmanın en zor yollarından biri içeriğinizi ortalamaktır. İçeriği yatay olarak ortalamak, zaman içinde belirli noktalarda nispeten kolaydır. İçeriği dikey olarak ortalamak neredeyse her zaman zordur. CSS kullanarak dikey olarak hizalanacak farklı bir öğeyi ortalamak. Bu kesinlikle tasarımcılar ve web yöneticileri için sorun yaratan çok sık sorulan bir sorudur. Bununla birlikte, dikey merkezleme yapmak için birçok teknik vardır ve her birinin kullanımı oldukça kolaydır.

Daha önce denediyseniz, özellikle tablo kullanmaktan kaçınmak istiyorsanız, bu yanıltıcıdır. Neyse ki, yardım çığlıklarımız duyuldu ve bu sorunu çözmek için CSS cephaneliğine eklenen yeni silahlardan biri, esnek kutu düzeni olarak bilinen bir düzen türüdür. Birkaç dakika içinde öğreneceğiniz gibi, karmaşık yerleşimleri basitleştirmek için size gerçekten harika özellikler sağlar. Bu harika işlevlerden bazıları, içeriğinizi dikey ve yatay olarak ortalamanıza da olanak tanır; bu eğitimde ele alacağımız şey budur. Bunu bir dereceye kadar dolgu ile yapabilirsiniz, ancak düzeninizi daha küçük ekranlara taşıyabilir. Stil sayfanıza özel bir CSS sınıfı eklemek, herhangi bir içeriği saniyeler içinde dikey olarak ortalayabileceğiniz anlamına gelir.

Yatay hizalama, bir paragrafın sol ve sağ kenarlarının metin kutusunun sol ve sağ kenarları arasında nasıl hizalanacağını belirler. Dikey hizalama, karakterin metin kutusundaki dikey yerleşimini belirler. Öğeleri CSS'de dikey olarak ortalamak için iyi yolların olmaması, neredeyse tüm varlığıyla ilgili itibarında karanlık bir kusurdu.

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

İlk yöntem basit ve biraz banal olup, uygulamada bir sınırlama olacağı dezavantajları vardır. Bir site için html sayfalarını kodlarken, metin içeriğinin satır aralığı muhtemelen varsayılan olarak kalan niteliklerden biridir. Genel olarak, blok için aynı yükseklikle gelen çizginin yüksekliğini ayarlamamız gerekir. satır yüksekliği Emlak.

CSS

Constutesim_first (
kenarlık: 2 piksel katı # bf1515;
yükseklik: 175 piksel;
}
.constutesim_first> p (
satır yüksekliği: 175 piksel;
kenar boşluğu: 0;
metin hizalama: merkez;
dolgu: 0;
yazı tipi boyutu: 17 piksel;
renk: # 3152a0;
yazı tipi ailesi: Tahoma;
yazı tipi ağırlığı: kalın;
}

Ayrıca, gerçekte her şeyin nasıl görüneceğini hemen görebilirsiniz.

Benzer bir yöntemle, merkezde ve kesinlikle dikey olacak olan görüntünün nasıl ortaya çıkarılacağını uygulamak mümkündür. Yalnızca dikey hizalama özelliği kaydetmek için kalır: orta; resmin görüntülenmesinden sorumludur.

CSS

İkinci varyasyon (
kenarlık: 2 piksel düz kırmızı;
satır yüksekliği: 158 piksel;
}

İkinci varyasyon div (
metin hizalama: merkez;
}
.ikinci varyasyon img (
dikey hizalama: orta;
kenarlık: 0px katı # 3a3838;
}

Görüntüleri merkezde ve dikey yönde uygularız.

Pozisyon özelliği ile hizalama

Bu muhtemelen en iyi bilinen tekniktir, ancak CSS ile kullanım için en yaygın olanıdır. Ancak burada ideal olmadığını da eklemelisiniz ve bu yöntemin ayrıca, öğenin merkeziyle ilişkili kendi küçük nüansları vardır, yüzde olarak ayarlanırsa, sol tarafında ortalanır. üst taraf, blogun içinde.

CSS

Yarışma seçeneği (
kenarlık: 2 piksel katı # d40e0e;
yükseklik: 162 piksel;
pozisyon: göreceli;
}
.competaird-seçenek div (
pozisyon: mutlak;
üst: %50;
sol: %50;
yükseklik: %28;
genişlik: %49;
marj: -2% 0 0 -25%;
kenarlık: 2 piksel katı # 4a4848;
}

Satır aralığı veya satır yüksekliği, oluşturulmuş bir HTML sayfasındaki metin satırları arasındaki dikey yüksekliktir. Neredeyse her zaman, bu mesafe değeri, tarayıcı veya oluşturucu tarafından karşılık gelen değere ayarlanır. Bu değer genellikle görüntülenen sayfanın yazı tipine ve diğer faktörlere bağlıdır.

tablo özelliği ile hizalama

Bu yöntemde, elemanları hücrelerin bulunduğu bir tabloya dönüştüreceğimiz denenmiş ve doğru yöntemi kullanıyoruz. Table adlı etikete gelince, burada kullanılmayacak, burada tamamen farklı bir CSS özelliği ayarlayacağız, bu display: table ;, display: table-cell ;. IE'nin en eski sürümlerinden bahsedersek, veriler burada görüntülenmez. Umarım tarayıcınızı güncellemişsinizdir, çünkü güncelliğini yitirir ve hemen hemen her şey düzgün görüntülenmez.

Chevert varyasyonu (
kenarlık: 2 piksel katı # c30b0b;
yükseklik: 173 piksel;
ekran: tablo;
genişlik: %100;
yazı tipi boyutu: 17 piksel;
yazı tipi ağırlığı: kalın;
renk: # 3945a0;
}

Chevert varyasyon div (
ekran: tablo hücresi;
dikey hizalama: orta;
metin hizalama: merkez;
}

Her şeyden önce, çoğu tarayıcı tarafından kullanılan varsayılana bir göz atalım. Çoğu modern gündüz tarayıcısında satır aralığı.

flex özelliği ile hizalama

Burada, bir İnternet kaynağının düzeninde nadiren bulunabilen, kendi özelliklerine sahip daha orijinal bir versiyona geliyoruz. Ama yine de uygulanırlar, bazı durumlarda faydalıdırlar. Bu, ana ekseni, esneme yönünün tanımının disket kabına sığması için ayarlar.

CSS

Varyant-yatay (
kenarlık: 2 piksel katı # d20c0c;
yükseklik: 147 piksel;
ekran: esnek;
hizalama öğeleri: merkez;
haklı içerik: merkez;
yazı tipi boyutu: 18 piksel;
yazı tipi ağırlığı: kalın;
renk: # 49518c;
}

Satır yüksekliği için, tıpkı css'de sayı, piksel boyutu veya yüzde olarak diğer herhangi bir boyutu belirttiğiniz gibi bir değer belirleyebilirsiniz.

transform özelliğiyle hizalama

Ve şimdi en uç yönteme geldik, ancak web tasarımında kullanmak açısından en sonuncusu değil. Burada her şey basit, belirtilen öğeyi ihtiyacınız olan değere göre dikey olarak kaydırmanız gerekiyor. Mülk dönüştürmek, bu, yükleyicinin paketi yüklerken uyguladığı dönüşümlerin bir listesidir. Yükleyici, dönüşümleri, özellikte belirtilen sırayla uygular.

CSS

Dikey-medilpasudsa (
kenarlık: 2 piksel katı # e00a0a;
yükseklik: 158 piksel;
yazı tipi boyutu: 19 piksel;
yazı tipi ağırlığı: kalın;
renk: # 353c71;
}
.vertical-medilpasudsa> div (
pozisyon: göreceli;
üst: %50;
transform: translateY (-50%);
metin hizalama: merkez;
}

Değerleri sayı olarak verdiğinizde o anki font boyutu baz alınacaktır. Geçerli yazı tipi boyutu, satır yüksekliğini veya satırlar arasındaki boşluğu hesaplamak için belirttiğiniz sayı ile çarpılır.

Karakterleri bir öğede yatay olarak ortalamak istiyorsanız, text-align: center kullanmanız gerekir. Bir seçenek, dikey olarak ortalamak istiyorsanız ve sabit bir altbilginiz ve bir satır metniniz varsa, satır yüksekliğini altbilgi yüksekliğinizle aynı olacak şekilde ayarlayın.

Metni div, başlık veya paragraf gibi bir öğe içinde ortalamanız gerekiyorsa, CSS metin hizalama özelliğini kullanabilirsiniz.

Metin hizalamanın birkaç geçerli özelliği vardır:

Merkez: Doku ortalanır;
sol: Konteynerin sol tarafına hizalanacak;
sağ: Konteynerin sağ tarafına hizalanmış
savunmak: Aşırı çizgiler hariç, kabın hem solunda hem de sağ kenarında hizalanmaya zorlanan;
hepsini haklı çıkar: Aşırı satırın karakterleri haklı çıkarmasına neden olur;
Başlat: Soldakiyle aynı, yalnızca yön soldan sağa gidiyorsa. Ancak başlangıçta sağdan sola olacak olan metin yönünün yönünü ayarlarsanız doğru olacaktır;
Son: Başlığın tersi;
eşleşme ebeveyni: Kalıtımla benzer şekilde, başlangıç ​​ve bitiş hariç, ana öğeye göre hesaplanır;

Bir üst öğe veya sarma div içindeki metni hizalamak için bu özellikleri kullanın. Metni bir öğede yatay olarak ortalamak istiyorsanız, text-align: center kullanmanız gerekir.

Bir seçenek, dikey olarak ortalamak istiyorsanız, sabit bir altbilginiz ve bir satır metniniz varsa, satır yüksekliğini altbilgi yüksekliğinizle aynı olacak şekilde ayarlayın.

Bir web sayfasındaki öğeleri hizalamak, özellikle metni dikey olarak hizalamak söz konusu olduğunda zor olabilir. Bu soru genellikle forumlarda karşılaşılır ve özellikle acemi kullanıcıların bu sorunu çözmesi zordur. Ama aslında, burada karmaşık bir şey yok. Tek ihtiyacınız olan basamaklı CSS stil sayfası hakkında biraz bilgi. Bu, tüm kuralları pahasına yapıldığından beri.

Dikey hizalamayı en az beş farklı şekilde gerçekleştirebilirsiniz. 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 kendiniz için uygun bir büyüme seçeceksiniz.

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

İlk yöntem çok yaygın ve kullanımını sınırlayan büyük bir dezavantajı var. Ama yine de, ne derse desin, işe yarayabilir ve hatta istenen sonucu getirebilir. Bu koşullu bir hizalama olacaktır, çünkü özünde satır yüksekliği özelliğini kullanarak satır yüksekliğini blok yüksekliğiyle eşleşecek şekilde ayarlıyoruz.

ilk örnek. 1 numaralı demo

/ * # 1 * / .talign1 (kenarlık: 1 piksel düz kırmızı; yükseklik: 200 piksel; / * blok yüksekliği * /) .talign1> p (satır yüksekliği: 200 piksel; / * satır yüksekliğini blok yüksekliğine göre ayarla * / kenar boşluğu : 0; / * varsa kenar boşluklarını kaldırın * / text-align: center; / * metni yatay olarak ortaya hizalayın * / padding: 0; / * varsa kenar boşluklarını kaldırın * /) / * end # 1*/

Tam olarak aynı şekilde, bir resmi dikeyin ortasına uygulamak mümkündür, ancak yeni bir özellik ekleyerek, dikey hizalama: orta; ...

Örnek. Demo # 2

/ * # 2 * / .talign2 (kenarlık: 1 piksel düz kırmızı; satır yüksekliği: 200 piksel; / * satır yüksekliği bloğu * /) .talign2 div (metin hizalama: merkez; / * öğeleri yatay olarak ortaya hizala * /) .talign2 img (dikey hizalama: orta; / * görüntüleri ortada dikey olarak hizala * / kenarlık: 1 piksel düz siyah;) / * bitiş # 2 * /

Pozisyon özelliği ile hizalama

Bu yöntem, görevimiz hariç pek çok CSS görevinde yaygın olarak kullanılmaktadır. Ancak tamamen mükemmel olmadığı ve kendine has yan etkileri olduğu da belirtilmelidir. Bunun nedeni, yüzde olarak verilen elemanın ortalanmasının iç ünitenin sol üst tarafında ortalanacak olmasıdır.

Bu nedenle, dış dolguya negatif bir değer ayarlamanız gerekir. Üst kenar boşluğu iç ünitenin yüksekliğinin yarısı, sol kenar boşluğu genişliğin yarısı olmalıdır. Böylece mutlak merkezi elde ederiz.

Bu durumda, alt öğenin tam yüksekliğini ve genişliğini bilmek muhtemelen zorunludur. Aksi takdirde, merkezleme hataları meydana gelebilir.

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

tablo özelliği ile hizalama

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

uygulanmaz, ancak display: table; , görüntüleme: tablo hücresi; ... IE'nin eski sürümlerinde bu yöntem çalışmaz ve gerekli değildir. Onları başka kullanan var mı?

Örnek. demo # 4

/ * # 4 * / .talign4 (kenarlık: 1 piksel düz 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 ; metin hizalama: orta;) / * bitiş # 4 * /

flex özelliği ile hizalama

Bu, site düzeninde çok yaygın olmayan özelliklerle zaten daha spesifik bir seçenektir. Ancak, yine de, nadir durumlarda çok faydalıdırlar.

CSS kullanarak bir nesneyi dikey olarak ortalamanın temelde farklı birkaç yolu vardır, ancak doğru olanı seçmek zor olabilir. Bazılarını ele alacağız ve ayrıca edinilen bilgileri kullanarak küçük bir site yapacağız.

CSS ile dikey merkez hizalaması elde etmek kolay değildir. Birçok yol vardır ve hepsi tüm tarayıcılarda çalışmaz. 5 farklı yönteme ve her birinin artıları ve eksilerine bir göz atalım. Örnek.

1. yol

Bu yöntem, bazı öğeleri ayarladığımızı varsayar.