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:
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:
Temel Diğer Metin
2. Alt Simge ve Üst Simge:
H2O sudur. X2+ ve2= r2
3. Üst ve Alt Hizalama:
Yukarıya hizalanmış Aşağıya hizalanmış
4. Orta Hizalama:
java veri yapıları
Bu simge dikey olarak ortalanmıştır
5. Metin Üstü ve Metin Alt Hizalaması:
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: ''; 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 (
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>⭐</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>Şimdi Test Edin
Çı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.Şimdi Test Edin
Çıktı
CSS'de Dikey Hizalamanın Avantajları
CSS'de Dikey Hizalamanın Dezavantajları
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.