CSS'de, dikey hizalama özelliği, satır içi düzey öğelerinin veya tablo hücrelerinin kapsayıcı öğeleri içindeki dikey hizalamasını kontrol eder. Bir metin satırının parçası olan veya satır içi blok veya tablo hücresi olarak görüntülenen öğeler için geçerlidir.

'Vertical-align' özelliği genellikle resimler, metinler gibi satır içi öğeler veya bir metin satırı içindeki satır içi blok öğeleri için kullanılır. Doğrudan blok düzeyindeki öğelere uygulanmaz; ancak bunları dikey olarak hizalamak için esnek kutu veya konumlandırma gibi teknikleri kullanabilirsiniz.

Sözdizimi:

Dikey hizalama özelliğinin temel sözdizimi aşağıda verilmiştir:

 selector { vertical-align: value; } 

'Değer' aşağıdaki seçeneklerden biri olabilir:

Temel:Öğenin taban çizgisini üst öğenin taban çizgisiyle hizalar. Bu çoğu öğe için varsayılan değerdir.Alt:Öğenin taban çizgisini üst öğenin yazı tipinin alt simge taban çizgisiyle hizalar.Süper:Öğenin taban çizgisini üst öğenin yazı tipinin üst simge taban çizgisiyle hizalar.Tepe:Öğenin üst kısmını, satır çerçevesi içindeki satırdaki en yüksek öğenin üst kısmıyla hizalayın.Metin üstü:Öğenin üst kısmını üst öğenin yazı tipinin üst kısmıyla hizalar.Orta:Öğeyi üst öğeye göre dikey olarak ortalar.Alt:Elemanın altını, satır çerçevesi içindeki satırdaki en alttaki elemanın alt kısmıyla hizalayın.Metin altı:Öğenin alt kısmını üst öğenin yazı tipinin alt kısmıyla hizalayın.Yüzde:Öğe, çizgi yüksekliğinin belirli bir yüzdesinde dikey olarak hizalanır. Örneğin, dikey hizalama: %50, öğeyi ana öğesi içinde dikey olarak ortalar.

NOT: 'Dikey hizalama'nın, kullanıldığı öğe türüne ve bağlama bağlı olarak kendine özgü davranışı olduğunu, dolayısıyla etkilerinin her zaman basit olmayabileceğini unutmayın. Satır içi öğeleri metinle veya diğer satır içi öğelerle hizalamak için özellikle kullanışlıdır.

Örnekler

CSS'deki 'dikey hizalama' özelliğiyle ilgili daha fazla ayrıntı ve örnek:

1. Temel Hizalama:

Dikey hizalama taban çizgisideğer, öğenin taban çizgisini üst öğesinin taban çizgisiyle hizalar. Bu, çoğu satır içi düzey öğesi için varsayılan davranıştır.

Temel Diğer Metin

2. Alt Simge ve Üst Simge:

Dikey hizalama:Alt değer, öğenin taban çizgisini üst öğenin yazı tipinin alt simge taban çizgisiyle hizalayarak onun bir alt simge olarak görünmesini sağlar. Diğer taraftan,dikey hizalama:Super, öğenin taban çizgisini üst öğenin yazı tipinin üst simge taban çizgisiyle hizalar.

H₂O sudur. X²+ ve²= r²

3. Üst ve Alt Hizalama:

Dikey hizalama:Üst değer, öğenin üst kısmını satır çerçevesi içindeki satırdaki en yüksek öğenin üst kısmıyla hizalar. Benzer şekilde,dikey hizalama:Alt, öğenin alt kısmını satır çerçevesi içindeki satırdaki en alttaki öğenin alt kısmıyla hizalar.

Yukarıya hizalanmış Aşağıya hizalanmış

4. Orta Hizalama:

java veri yapıları

Dikey hizalama:Orta değer, öğeyi üst öğeye göre dikey olarak ortalar. Bu genellikle metin içindeki simgeleri veya görüntüleri ortalamak için kullanılır.

Bu simge dikey olarak ortalanmıştır

5. Metin Üstü ve Metin Alt Hizalaması:

Dikey hizalama:Text-top değeri, öğenin üst kısmını ana öğenin yazı tipinin üst kısmıyla hizalar vedikey hizalama:Text-bottom, öğenin alt kısmını ana öğenin yazı tipinin alt kısmıyla hizalar.

Metin üste hizalanmış Metin alta hizalanmış

6. Yüzde Hizalaması:

Dikey hizalamayla bir yüzde değeri kullanmak, öğeyi belirli bir satır yüksekliği yüzdesinde dikey olarak hizalamanıza olanak tanır. Örneğin, dikey hizalama: %50, öğeyi satır yüksekliğinin yarısı kadar ortalayacaktır.

Dikey olarak ortalanmış

dize bölünmüş bash

7. Blok Seviyesindeki Elemanların Dikey Ortalaması:

Blok düzeyindeki bir öğeyi üst öğesi içinde dikey olarak ortalamak için esnek kutu veya ızgara düzenini kullanabilirsiniz.

 Flexbox example: html Vertically Centered css .parent { display: flex; justify-content: center; align-items: center; height: 200px; /* Set the desired container height */ } 

8. Bilinmeyen Eleman Yüksekliği ile Dikey Merkezleme:

Dikey olarak ortalamak istediğiniz öğenin yüksekliğini bilmiyorsanız konum ve dönüşümün bir kombinasyonunu kullanabilirsiniz:

 html Vertically Centered (Unknown Height) CSS .parent { position: relative; height: 200px; /* Set the desired container height */ } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

9. Çok Satırlı Metinle Dikey Ortalama:

Çok satırlı metni bir kap içinde dikey olarak ortalamak için flexbox ve sözde öğe kombinasyonunu kullanabilirsiniz:

 html Multi-line <br>Vertically Centered Text CSS .parent { display: flex; align-items: center; height: 200px; /* Set the desired container height */ } .child { flex: 1; text-align: center; } .child::before { content: &apos;&apos;; display: inline-block; vertical-align: middle; height: 100%; } 

10. Farklı En Boy Oranlarına Sahip Bir Kaptaki Görüntülerin Dikey Ortalanması:

Bir kapsayıcı içinde ortalamak istediğiniz çeşitli en boy oranlarına sahip resimleriniz varsa, flexbox ve object-fit kombinasyonunu kullanabilirsiniz:

HTML:

 <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 1"> <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 2"> 

CSS:

 .parent { display: flex; align-items: center; justify-content: center; height: 200px; /* Set the desired container height */ } img { object-fit: contain; max-height: 100%; } 

11. Dikey hizalamayı çizgi yüksekliğiyle birleştirmek:

Özellikle daha büyük yazı tipi boyutlarında daha hassas dikey hizalama elde etmek için dikey hizalama özelliğini satır yüksekliği özelliğiyle birleştirebilirsiniz.

 .element { font-size: 24px; line-height: 1.5; vertical-align: middle; } 

12. Hizalama için ekran Özelliğini Kullanma:

Dikey hizalama öncelikle satır içi düzeydeki öğelerle işe yarasa da, belirli bağlamlarda blok düzeyindeki öğeler için dikey hizalama elde etmek amacıyla görüntüleme özelliğini değiştirebilirsiniz.

 .container { display: table-cell; vertical-align: middle; } 

13. Tablolarda Dikey Hizalama:

Dikey hizalama özelliği genellikle tablo hücrelerinde kullanılır () hücreler içindeki içeriğin hizalanmasını kontrol etmek için.

birden fazla tablodan sql seç

 td { vertical-align: middle; } 

14. Satır İçi Blok Elemanlarının Hizalanması:

Bir metin satırı içindeki satır içi blok öğelerini (örneğin, metnin yanındaki simgeler) hizalamak için dikey hizalamayı kullanabilirsiniz.

 <span>&#x2B50;</span> Star Rating .icon { vertical-align: middle; font-size: 24px; } 

Bunlar farklı senaryolarda dikey hizalamayı ele almanın yalnızca birkaç örneğidir. Özel düzeninize ve gereksinimlerinize bağlı olarak, istenen sonuçları elde etmek için bu teknikleri uyarlamanız veya birleştirmeniz gerekebilir. CSS, çeşitli bağlamlarda dikey hizalamayı etkili bir şekilde gerçekleştirmek için çeşitli araçlar sağlar.

Dikey hizalama özelliğinin kullanım alanları olmasına rağmen, tüm hizalama senaryoları, özellikle blok düzeyindeki öğeler için daha kapsamlı çözümlerin mevcut olduğunu unutmayın. Daha karmaşık düzenler ve hizalama gereksinimleri için, istenen sonuçların daha etkili ve öngörülebilir şekilde elde edilmesi amacıyla Flexbox, CSS Grid gibi modern CSS mizanpaj tekniklerinin ve hatta CSS konum değerlerinin (mutlak ve göreceli gibi) araştırılması önerilir.

'Dikey hizalamanın' yalnızca satır içi düzeydeki öğeleri veya tablo hücrelerini etkilediğini unutmayın. Blok düzeyindeki öğeleri dikey olarak hizalamak için esnek kutu, ızgara düzeni veya konumlandırma gibi teknikleri kullanın.

Birkaç Örnek Daha

 table, th, td{ border: 2px solid red; border-collapse: collapse; font-size: 20px; } #super{ vertical-align: super; } #sub{ vertical-align: sub; } <table class="table"> <td>baseline</td> <td>middle</td> <td>bottom</td> <td>top</td> <td>Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. </td> </table> <h2> Use of super and sub values </h2> <h3>Using super value: x<span id="super">2</span>+ y<span id="super">2</span> = r<span id="super">2</span></h3> <h3> Chemical formula of Water by using sub value: H<span id="sub">2</span>O</h3> 

Çıktı

Şimdi metni görselle hizaladığımız başka bir örnek daha var.

Örnek

 div{ font-size: 20px; border: 2px solid red; } img{ width:150px; height: 100px; } img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp"> image with a default alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-bottom alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a middle alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-top alignment. 

Çıktı

CSS'de Dikey Hizalamanın Avantajları

Satır İçi Elemanlar İçin Kullanımı Kolay:Dikey hizalama özelliği, görüntüler, simgeler veya metin gibi öğeleri bir metin satırı veya diğer öğeler içinde hizalamak için basittir.Geniş Tarayıcı Desteği:Dikey hizalama özelliği iyi bir tarayıcı desteğine sahiptir ve farklı tarayıcılarda yaygın olarak desteklenir.Çoklu Hizalama Seçenekleri:Taban çizgisi, orta, üst, alt, metin-üst, metin-alt, alt simge ve üst simge gibi çeşitli hizalama seçenekleri sunarak geliştiricilere öğeleri gereksinimlerine göre hizalama konusunda esneklik sağlar.Duyarlı Hizalama:Konteynerin boyutuna veya mevcut alana göre dikey hizalamayı uyarlamak için duyarlı tasarımda kullanılabilir.Satır İçi Öğeler için Basitlik:Bir metin satırı içindeki simgeler veya görüntüler gibi küçük öğeleri hizalamak için dikey hizalama özelliği, karmaşık düzen teknikleri gerektirmeden nispeten basit bir çözüm sağlar.İnce ayar:Bu özellik, belirli tasarım hedeflerine ulaşmada yararlı olabilecek öğelerin dikey konumlarına ince ayar yapılmasına olanak tanır.Tablo Hücreleriyle Tutarlılık:Tablolar bağlamında dikey hizalama özelliği, tablo hücreleri içindeki içerik hizalamasını kontrol eder. Bu, tablo tabanlı düzenlerde tutarlılığın korunmasına yardımcı olabilir.Metinle Birleştirmek:Simgeleri veya satır içi etiketleri bitişik metinle hizalamak gibi öğeleri metin içeriğiyle etkili bir şekilde hizalar.En Boy Oranlarının Korunması:Görüntüleri veya simgeleri bir metin satırı içinde hizalarken dikey hizalama, özellikle uygun yazı tipi boyutları ve satır yükseklikleriyle birleştirildiğinde bu öğelerin en boy oranının korunmasına yardımcı olabilir.Hızlı Hizalama Düzeltmeleri:Özellikle karışık içeriğe sahip senaryolarda dikey hizalama sorunları için hızlı düzeltmelere ihtiyaç duyduğunuzda, dikey hizalama, kapsamlı düzen yeniden yapılandırması gerektirmeden hızlı bir çözüm sağlayabilir.CSS E-posta Stili:Karmaşık düzenlerin daha iyi desteklenmesi gereken HTML e-postalarında, dikey hizalamanın kullanılması, harici stil sayfalarına veya karmaşık tekniklere dayanmadan öğelerin temel dikey hizalanması için yararlı olabilir.Ekranla uyumlu:inline-block: Vertical-align özelliği, inline-block öğeleriyle uyumludur ve bu tür öğelerin bir çizgi içinde kolayca dikey hizalanmasına olanak tanır.Tutarlılığın Korunması:Tablo verilerinin parçası olan veya farklı satır veya sütunlardaki benzer öğelerle hizalanması gereken öğeler için dikey hizalama, görsel tutarlılığın korunmasına yardımcı olabilir.Tarayıcı Uyumluluğu:Bazı yeni CSS tekniklerinin aksine, dikey hizalama uzun süredir CSS'nin bir parçası olmuştur ve tarayıcılar arası iyi bir uyumluluğa sahiptir.

CSS'de Dikey Hizalamanın Dezavantajları

Satır İçi Öğelerle Sınırlıdır:Dikey hizalama özelliğinin en önemli sınırlaması, yalnızca satır içi düzey öğeler veya tablo hücreleri için çalışmasıdır. Blok düzeyindeki öğelere doğrudan uygulanmaz. Bu, daha büyük öğeler veya karmaşık düzenler için dikey hizalamayı daha zor hale getirebilir.Tutarsız Davranış:Dikey hizalama, özellikle farklı yazı tipi boyutları, satır yükseklikleri ve iç içe geçmiş öğeler kullanıldığında yanıltıcı ve tutarsız olabilir. Aynı dikey hizalama değeri bağlama bağlı olarak farklı sonuçlar üretebilir.Tarayıcı Tuhaflıkları:Bazı eski tarayıcıların dikey hizalama özelliğiyle ilgili tutarsız yorumları veya tuhaflıkları olabilir ve bu da beklenmeyen sonuçlara yol açabilir. Ancak modern tarayıcıların gelişmesiyle bu sorun düzeldi.Aralık Üzerinde Sınırlı Kontrol:Dikey hizalama özelliği öncelikle öğelerin dikey olarak hizalanmasıyla ilgilidir, ancak öğeler arasındaki boşluk üzerinde yalnızca küçük bir kontrol sağlar. Aralığın ayarlanması çoğu zaman ek CSS veya HTML değişiklikleri gerektirir.Alternatif Olarak Flexbox ve Grid:Daha karmaşık düzen gereksinimleri ve blok düzeyindeki öğelerin dikey hizalanması için geliştiriciler genellikle daha sağlam ve öngörülebilir çözümler sağlayan Flexbox veya CSS Grid'e güvenir.Tam Merkezlemeye Uygun Değil:Dikey hizalama, satır içi öğelerin dikey olarak hizalanması için yararlı olsa da, ek CSS teknikleriyle blok düzeyindeki öğelerin tam merkezlenmesi (yatay ve dikey olarak) için uygundur.Yanıltıcı İsim:'Dikey hizalama' adı yanıltıcı olabilir çünkü öğeyi geliştiricilerin sıklıkla beklediği şekilde dikey olarak hizalamaz. Bunun yerine, öğenin içeriğinin satır çerçevesi içindeki hizalamasını kontrol eder.Farklı Yazı Tipleriyle Karmaşıklık:Farklı yazı tipi boyutlarına ve satır yüksekliklerine sahip öğelerle çalışırken dikey hizalamanın davranışı tahmin edilemeyebilir. Bu, tutarlı dikey hizalamayı zorlaştırabilir.Karmaşık Düzenlerle Sınırlıdır:Bir üst kapsayıcı içindeki daha büyük, blok düzeyindeki öğeleri dikey olarak hizalamanız gereken karmaşık düzenler veya senaryolar için uygun değildir.Tarayıcılar Arası Uyumluluk:Modern tarayıcılar dikey hizalama için geliştirilmiş desteğe sahip olsa da eski tarayıcılar hâlâ tutarsızlıklar veya beklenmedik davranışlar sergileyebilir.Alternatif Teknikler:Flexbox ve CSS Grid gibi modern CSS mizanpaj teknikleri, hem satır içi hem de blok düzeyindeki öğelerin dikey hizalanması da dahil olmak üzere karmaşık mizanpaj gereksinimlerini karşılamanın daha güçlü ve öngörülebilir yollarını sunar.Erişilebilirlikle İlgili Hususlar:Düzen için dikey hizalamayı kullanmak, ekran okuyuculara ve diğer yardımcı teknolojilere müdahale edebileceğinden en erişilebilir yaklaşım olmayabilir. Semantik HTML ve uygun CSS teknikleri genellikle erişilebilirlik açısından daha iyi seçimlerdir.Hata Ayıklama Zorlukları:Beklenmeyen davranışlarda hata ayıklamak veya dikey hizalamayla ilgili hizalama sorunları, özellikle iç içe geçmiş öğelerle ve değişen yazı tipi boyutlarıyla çalışırken bazen zor olabilir.Web Düzeninin Evrimi:Web geliştirme ortamı geliştikçe, CSS Izgara Düzeni ve Flexbox gibi yeni düzen teknikleri, düzen zorluklarına yönelik daha modern ve kapsamlı çözümler sunarak, potansiyel olarak birçok senaryo için dikey hizalamayı daha az anlamlı hale getiriyor.

Genel olarak, dikey hizalama özelliği satır içi öğeleri veya tablo hücrelerini bir metin satırı içinde hizalamak için kullanışlı olsa da, geliştiriciler, özellikle blok düzeyindeki öğeler veya karmaşık düzenlerle uğraşırken, daha gelişmiş düzen ve konumlandırma gereksinimleri için sıklıkla başka CSS tekniklerine ihtiyaç duyarlar. CSS Flexbox ve CSS Grid, daha geniş hizalama ve konumlandırma kontrolü için güçlü alternatiflerdir.

Çözüm

Vertical-align özelliği, metin veya tablo hücreleri içindeki satır içi öğeleri hizalamak için kullanışlıdır. Ancak sınırlamaları vardır ve karmaşık düzenler veya blok düzeyindeki öğeler için etkili bir şekilde kullanılması zor olabilir. Geliştiriciler, hizalama ve konumlandırma konusunda daha fazla kontrol ve esneklik sağlayan modern CSS mizanpaj tekniklerini dikkate almalıdır.