vertical-align<\/code>, \u00f6zellikle sat\u0131r i\u00e7i (inline-level) ve tablo h\u00fccresi (table-cell) elementlerin dikey eksende nas\u0131l hizalanaca\u011f\u0131n\u0131 belirlemede temel bir rol oynar. Ancak, bu \u00f6zelli\u011fin \u00e7al\u0131\u015fma mekanizmas\u0131 ve uygulama alanlar\u0131, genellikle yanl\u0131\u015f anla\u015f\u0131lan veya s\u0131n\u0131rl\u0131 kullan\u0131lan konular aras\u0131nda yer al\u0131r. Bu makalede, vertical-align<\/code> \u00f6zelli\u011fini derinlemesine inceleyecek, farkl\u0131 de\u011ferlerini, \u00e7al\u0131\u015fma prensiplerini, yayg\u0131n kullan\u0131m senaryolar\u0131n\u0131, s\u0131n\u0131rlamalar\u0131n\u0131 ve modern CSS teknikleriyle ili\u015fkisini detayland\u0131raca\u011f\u0131z.<\/p>\nvertical-align Nedir ve Ne \u0130\u015fe Yarar?<\/h3>\n
vertical-align<\/code> CSS \u00f6zelli\u011fi, bir elementin dikey hizalamas\u0131n\u0131 ayarlamak i\u00e7in kullan\u0131l\u0131r. Ancak burada \u00f6nemli bir ayr\u0131m yapmak gerekir: Bu \u00f6zellik, yaln\u0131zca<\/em> display<\/code> de\u011feri inline<\/code>, inline-block<\/code>, inline-table<\/code> veya table-cell<\/code> olan elementler \u00fczerinde etkilidir. Ba\u015fka bir deyi\u015fle, bir elementin kendi i\u00e7eri\u011fini dikeyde ortalamak veya bir blok elementi bir kapsay\u0131c\u0131 i\u00e7inde dikeyde hizalamak i\u00e7in do\u011frudan vertical-align<\/code> kullan\u0131lamaz. Bunun yerine, bir sat\u0131r kutusu (line box) i\u00e7indeki sat\u0131r i\u00e7i elementlerin veya bir tablo h\u00fccresi i\u00e7indeki i\u00e7eri\u011fin kendi dikey hizalama noktas\u0131n\u0131 belirler.<\/p>\nvertical-align<\/code>‘\u0131n temel amac\u0131, ayn\u0131 sat\u0131rda bulunan farkl\u0131 boyutlardaki metin, resim veya di\u011fer sat\u0131r i\u00e7i elementlerin birbirlerine g\u00f6re nas\u0131l konumlanaca\u011f\u0131n\u0131 d\u00fczenlemektir. \u00d6rne\u011fin, bir metin paragraf\u0131n\u0131n yan\u0131na eklenmi\u015f k\u00fc\u00e7\u00fck bir ikonun metnin taban \u00e7izgisine (baseline) veya ortas\u0131na hizalanmas\u0131n\u0131 sa\u011flamak i\u00e7in vertical-align<\/code> kullan\u0131l\u0131r. Tablo h\u00fccrelerinde ise, h\u00fccre i\u00e7eri\u011finin h\u00fccrenin \u00fcst\u00fcne, ortas\u0131na, alt\u0131na veya taban \u00e7izgisine hizalanmas\u0131n\u0131 sa\u011flar.<\/p>\nBu \u00f6zelli\u011fin do\u011fru anla\u015f\u0131lmas\u0131, \u00f6zellikle eski taray\u0131c\u0131 uyumlulu\u011fu gerektiren projelerde veya karma\u015f\u0131k metin ve g\u00f6rsel d\u00fczenlemelerde b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Modern CSS’in Flexbox ve Grid gibi g\u00fc\u00e7l\u00fc d\u00fczenleme ara\u00e7lar\u0131 olsa da, vertical-align<\/code> kendi ni\u015f alan\u0131nda vazge\u00e7ilmez bir ara\u00e7 olmaya devam etmektedir.<\/p>\nTemel Kullan\u0131m ve De\u011ferler<\/h3>\n
vertical-align<\/code> \u00f6zelli\u011fi, bir dizi anahtar kelime, uzunluk birimi veya y\u00fczde de\u011feri alabilir. Bu de\u011ferler, elementin kendi kapsay\u0131c\u0131s\u0131n\u0131n (sat\u0131r kutusu veya tablo h\u00fccresi) dikey eksenindeki \u00e7e\u015fitli referans noktalar\u0131na g\u00f6re nas\u0131l hizalanaca\u011f\u0131n\u0131 belirler.<\/p>\nAnahtar Kelime De\u011ferleri<\/h4>\n
Bu de\u011ferler, genellikle bir elementin taban \u00e7izgisi, \u00fcst\u00fc, alt\u0131 veya metinle ili\u015fkili di\u011fer noktalar\u0131na g\u00f6re hizalanmas\u0131n\u0131 sa\u011flar.<\/p>\n
* baseline<\/code> (Varsay\u0131lan):<\/strong> Bu, vertical-align<\/code> \u00f6zelli\u011finin varsay\u0131lan de\u011feridir. Elementin taban \u00e7izgisini, ebeveyn elementin veya sat\u0131r kutusunun taban \u00e7izgisiyle hizalar. Metin i\u00e7eren elementler i\u00e7in bu olduk\u00e7a sezgiseldir. Resimler gibi metin i\u00e7ermeyen elementler i\u00e7in ise, elementin alt kenar\u0131 genellikle ebeveynin taban \u00e7izgisiyle hizalan\u0131r (ancak bu, taray\u0131c\u0131ya ve fonta g\u00f6re hafif farkl\u0131l\u0131k g\u00f6sterebilir). Bu, resimlerin alt\u0131nda k\u00fc\u00e7\u00fck bir bo\u015fluk b\u0131rakmas\u0131n\u0131n yayg\u0131n nedenlerinden biridir.
\n* top<\/code>:<\/strong> Elementin \u00fcst kenar\u0131n\u0131, sat\u0131r kutusunun en \u00fcstteki elementinin \u00fcst kenar\u0131yla hizalar. Tablo h\u00fccrelerinde ise h\u00fccre i\u00e7eri\u011fini h\u00fccrenin \u00fcst kenar\u0131na hizalar.
\n* middle<\/code>:<\/strong> Elementin dikey orta noktas\u0131n\u0131, ebeveynin taban \u00e7izgisinin yar\u0131s\u0131 kadar yukar\u0131da olacak \u015fekilde hizalar. Genellikle, metin i\u00e7eren elementler i\u00e7in metnin x-y\u00fcksekli\u011fi (k\u00fc\u00e7\u00fck harflerin y\u00fcksekli\u011fi) ile ayn\u0131 hizada olacak \u015fekilde hizalan\u0131r. G\u00f6rsel elementler i\u00e7in ise, elementin orta noktas\u0131, ebeveynin metninin ortalama y\u00fcksekli\u011fiyle hizalan\u0131r.
\n* bottom<\/code>:<\/strong> Elementin alt kenar\u0131n\u0131, sat\u0131r kutusunun en alttaki elementinin alt kenar\u0131yla hizalar. Tablo h\u00fccrelerinde ise h\u00fccre i\u00e7eri\u011fini h\u00fccrenin alt kenar\u0131na hizalar.
\n* text-top<\/code>:<\/strong> Elementin \u00fcst kenar\u0131n\u0131, ebeveyn elementin i\u00e7eri\u011finin metin \u00fcst \u00e7izgisiyle (text-top) hizalar. Bu, fontun en y\u00fcksek noktas\u0131n\u0131 ifade eder.
\n* text-bottom<\/code>:<\/strong> Elementin alt kenar\u0131n\u0131, ebeveyn elementin i\u00e7eri\u011finin metin alt \u00e7izgisiyle (text-bottom) hizalar. Bu, fontun en al\u00e7ak noktas\u0131n\u0131 ifade eder.
\n* sub<\/code>:<\/strong> Elementi, ebeveyn elementin taban \u00e7izgisinin alt\u0131na, alt simge (subscript) gibi konumland\u0131r\u0131r. Metin boyutunu etkilemez, sadece dikey konumunu de\u011fi\u015ftirir.
\n* super<\/code>:<\/strong> Elementi, ebeveyn elementin taban \u00e7izgisinin \u00fcst\u00fcne, \u00fcst simge (superscript) gibi konumland\u0131r\u0131r. Metin boyutunu etkilemez, sadece dikey konumunu de\u011fi\u015ftirir.
\n* initial<\/code>:<\/strong> \u00d6zelli\u011fi varsay\u0131lan de\u011ferine (baseline) s\u0131f\u0131rlar.
\n* inherit<\/code>:<\/strong> \u00d6zelli\u011fin de\u011ferini ebeveyn elementten miras al\u0131r.
\n* unset<\/code>:<\/strong> \u00d6zelli\u011fi, miras al\u0131nabilirse inherit<\/code>, aksi takdirde initial<\/code> de\u011ferine s\u0131f\u0131rlar.<\/p>\nUzunluk De\u011ferleri (Length Values)<\/h4>\n
vertical-align<\/code> \u00f6zelli\u011fine px<\/code>, em<\/code>, rem<\/code> gibi mutlak veya g\u00f6receli uzunluk de\u011ferleri de atanabilir. Bu de\u011ferler, elementin taban \u00e7izgisini, ebeveynin taban \u00e7izgisine g\u00f6re belirtilen miktar kadar yukar\u0131 veya a\u015fa\u011f\u0131 hareket ettirir. Pozitif de\u011ferler elementi yukar\u0131, negatif de\u011ferler ise a\u015fa\u011f\u0131 hareket ettirir.<\/p>\n\u00d6rne\u011fin, vertical-align: 5px;<\/code> elementi 5 piksel yukar\u0131 ta\u015f\u0131rken, vertical-align: -3em;<\/code> elementi 3 em<\/code> birimi kadar a\u015fa\u011f\u0131 ta\u015f\u0131r. Bu, \u00f6zellikle k\u00fc\u00e7\u00fck ayarlamalar veya belirli bir ofsetle hizalama gerekti\u011finde kullan\u0131\u015fl\u0131d\u0131r.<\/p>\nY\u00fczde De\u011ferleri (Percentage Values)<\/h4>\n
Y\u00fczde de\u011ferleri, elementin line-height<\/code> \u00f6zelli\u011finin hesaplanm\u0131\u015f de\u011ferine g\u00f6re belirlenir. \u00d6rne\u011fin, vertical-align: 50%;<\/code> elementin taban \u00e7izgisini, ebeveynin line-height<\/code> de\u011ferinin yar\u0131s\u0131 kadar yukar\u0131 hareket ettirir. line-height<\/code> de\u011feri 20px ise, 50%<\/code> 10px’e kar\u015f\u0131l\u0131k gelir. Bu, dinamik boyutland\u0131rmalarda veya line-height<\/code>‘a ba\u011f\u0131ml\u0131 hizalamalarda esneklik sa\u011flar.<\/p>\nvertical-align’\u0131n \u00c7al\u0131\u015fma Mekanizmas\u0131<\/h3>\n
vertical-align<\/code>‘\u0131n nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamak i\u00e7in, CSS’in sat\u0131r i\u00e7i bi\u00e7imlendirme ba\u011flam\u0131 (inline formatting context) kavram\u0131n\u0131 ve sat\u0131r kutular\u0131 (line boxes) ile inline kutular (inline boxes) aras\u0131ndaki ili\u015fkiyi kavramak \u00f6nemlidir.<\/p>\nInline Kutular ve Sat\u0131r Kutular\u0131<\/h4>\n
Web sayfas\u0131ndaki metinler, resimler, span<\/code> elementleri gibi display: inline<\/code> veya display: inline-block<\/code> \u00f6zellikli elementler, “inline kutular” olarak adland\u0131r\u0131l\u0131r. Bu inline kutular, bir sat\u0131r boyunca yan yana yerle\u015fir ve bir “sat\u0131r kutusu” olu\u015ftururlar. Bir sat\u0131r kutusu, bir blok elementin (\u00f6rne\u011fin bir p<\/code> veya div<\/code>) i\u00e7inde yer alan ve bir sat\u0131ra s\u0131\u011fan t\u00fcm inline i\u00e7eri\u011fi kapsayan soyut bir aland\u0131r. Bir blok elementin i\u00e7inde birden fazla sat\u0131r kutusu olabilir.<\/p>\nvertical-align<\/code> \u00f6zelli\u011fi, bir inline kutuyu kendi sat\u0131r kutusu i\u00e7inde<\/em> dikey olarak konumland\u0131r\u0131r. Yani, bir inline kutuyu ebeveyn blok elementinin i\u00e7inde dikeyde hizalamak yerine, o kutuyu i\u00e7inde bulundu\u011fu sat\u0131r kutusunun di\u011fer inline kutular\u0131na ve referans noktalar\u0131na g\u00f6re hizalar.<\/p>\nHer sat\u0131r kutusunun bir “baseline” (taban \u00e7izgisi) vard\u0131r. Bu taban \u00e7izgisi, genellikle sat\u0131r kutusu i\u00e7indeki metnin ana taban \u00e7izgisiyle \u00e7ak\u0131\u015f\u0131r. vertical-align<\/code>‘\u0131n \u00e7o\u011fu de\u011feri, elementin kendi taban \u00e7izgisini bu sat\u0131r kutusu taban \u00e7izgisine g\u00f6re ayarlar. \u00d6rne\u011fin:<\/p>\n* vertical-align: baseline;<\/code> elementin taban \u00e7izgisini sat\u0131r kutusunun taban \u00e7izgisiyle \u00e7ak\u0131\u015ft\u0131r\u0131r.
\n* vertical-align: middle;<\/code> elementin orta noktas\u0131n\u0131, sat\u0131r kutusunun taban \u00e7izgisinin yakla\u015f\u0131k olarak x-y\u00fcksekli\u011finin yar\u0131s\u0131 kadar yukar\u0131s\u0131na hizalar.
\n* vertical-align: top;<\/code> elementin \u00fcst kenar\u0131n\u0131, sat\u0131r kutusunun en y\u00fcksek inline kutusunun \u00fcst kenar\u0131yla hizalar. Bu, t\u00fcm sat\u0131r kutusunun y\u00fcksekli\u011fini etkileyebilir.<\/p>\nSat\u0131r kutusunun y\u00fcksekli\u011fi, i\u00e7indeki en uzun veya en y\u00fcksek inline kutular taraf\u0131ndan belirlenir. vertical-align<\/code> de\u011feri, bu kutular\u0131n birbirine g\u00f6re nas\u0131l hizaland\u0131\u011f\u0131n\u0131 belirleyerek, dolayl\u0131 olarak sat\u0131r kutusunun toplam y\u00fcksekli\u011fini de etkileyebilir.<\/p>\nSat\u0131r Y\u00fcksekli\u011fi (line-height) ve vertical-align \u0130li\u015fkisi<\/h4>\n
line-height<\/code> \u00f6zelli\u011fi, bir metin sat\u0131r\u0131n\u0131n toplam y\u00fcksekli\u011fini belirler. Bu y\u00fckseklik, metin font boyutundan daha b\u00fcy\u00fck oldu\u011funda, fazladan bo\u015fluk (leading) metnin \u00fcst ve alt\u0131na e\u015fit olarak da\u011f\u0131t\u0131l\u0131r. vertical-align<\/code> \u00f6zelli\u011fi, bu line-height<\/code> taraf\u0131ndan olu\u015fturulan alanda \u00e7al\u0131\u015f\u0131r.<\/p>\n\u00d6zellikle y\u00fczde de\u011ferleri (vertical-align: 50%;<\/code>) veya middle<\/code> gibi anahtar kelimeler, line-height<\/code> de\u011feriyle do\u011frudan ili\u015fkilidir. middle<\/code> de\u011feri, elementin dikey orta noktas\u0131n\u0131, ebeveynin taban \u00e7izgisinin yar\u0131s\u0131 kadar yukar\u0131da olacak \u015fekilde hizalar. Bu “yar\u0131m y\u00fckseklik,” genellikle ebeveynin line-height<\/code> de\u011ferine ba\u011fl\u0131d\u0131r.<\/p>\nFarkl\u0131 font-size<\/code> ve line-height<\/code> de\u011ferlerine sahip inline elementler, vertical-align<\/code> ile hizaland\u0131\u011f\u0131nda, sat\u0131r kutusunun toplam y\u00fcksekli\u011fini ve dolay\u0131s\u0131yla di\u011fer elementlerin konumunu etkileyebilir. \u00d6rne\u011fin, b\u00fcy\u00fck bir resim veya farkl\u0131 bir font-size<\/code>‘a sahip bir span<\/code> etiketi, sat\u0131r kutusunun y\u00fcksekli\u011fini art\u0131rarak, di\u011fer elementlerin baseline<\/code> hizalamas\u0131n\u0131 de\u011fi\u015ftirebilir.<\/p>\nAnonim Inline Kutular (Anonymous Inline Boxes)<\/h4>\n
Bir blok elementin do\u011frudan i\u00e7ine yerle\u015ftirilmi\u015f metin (bir span<\/code> veya ba\u015fka bir inline element i\u00e7ine al\u0131nmam\u0131\u015fsa), “anonim inline kutu” olarak adland\u0131r\u0131l\u0131r. \u00d6rne\u011fin:<\/p>\n\n Bu bir metin. ![\"icon\"](\"icon.png\")
Devam eden metin.\n<\/div><\/code><\/pre>\nBurada “Bu bir metin.” ve “Devam eden metin.” k\u0131s\u0131mlar\u0131 anonim inline kutulard\u0131r. vertical-align<\/code> \u00f6zelli\u011fi, img<\/code> elementi gibi di\u011fer inline elementleri bu anonim inline kutular\u0131n taban \u00e7izgisiyle hizalar. Bu, img<\/code> elementinin alt\u0131nda varsay\u0131lan olarak g\u00f6r\u00fcnen k\u00fc\u00e7\u00fck bo\u015flu\u011fun nedenlerinden biridir (vertical-align: baseline;<\/code> varsay\u0131lan oldu\u011fu i\u00e7in, resmin alt kenar\u0131 metnin taban \u00e7izgisiyle hizalan\u0131r ve genellikle fontun inen k\u0131s\u0131mlar\u0131 i\u00e7in ayr\u0131lan bo\u015fluk kal\u0131r).<\/p>\nTablo H\u00fccrelerinde (table-cell) vertical-align<\/h3>\n
vertical-align<\/code> \u00f6zelli\u011fi, display: table-cell<\/code> olarak ayarlanm\u0131\u015f elementler \u00fczerinde (yani <\/p>\n<\/code> ve <\/p>\n<\/code> elementleri gibi) farkl\u0131 ve daha sezgisel bir \u015fekilde \u00e7al\u0131\u015f\u0131r. Bir tablo h\u00fccresi ba\u011flam\u0131nda, vertical-align<\/code> elementin i\u00e7eri\u011fini h\u00fccrenin kendi i\u00e7inde<\/em> dikey olarak hizalar.<\/p>\nTablo h\u00fccrelerinde kullan\u0131labilecek vertical-align<\/code> de\u011ferleri \u015funlard\u0131r:<\/p>\n* top<\/code>:<\/strong> H\u00fccre i\u00e7eri\u011fini h\u00fccrenin \u00fcst kenar\u0131na hizalar.
\n* middle<\/code>:<\/strong> H\u00fccre i\u00e7eri\u011fini h\u00fccrenin dikey orta noktas\u0131na hizalar. Bu, genellikle bir tablo h\u00fccresindeki i\u00e7eri\u011fi dikeyde ortalamak i\u00e7in en yayg\u0131n kullan\u0131lan de\u011ferdir.
\n* bottom<\/code>:<\/strong> H\u00fccre i\u00e7eri\u011fini h\u00fccrenin alt kenar\u0131na hizalar.
\n* baseline<\/code>:<\/strong> H\u00fccredeki ilk metin sat\u0131r\u0131n\u0131n taban \u00e7izgisini, ayn\u0131 sat\u0131rdaki di\u011fer h\u00fccrelerin taban \u00e7izgileriyle hizalar. E\u011fer bir h\u00fccrede metin yoksa veya metin birden fazla sat\u0131ra yay\u0131l\u0131yorsa, bu de\u011ferin davran\u0131\u015f\u0131 daha karma\u015f\u0131k olabilir ve genellikle h\u00fccrenin \u00fcst kenar\u0131 baz al\u0131n\u0131r.<\/p>\nTablo h\u00fccrelerindeki vertical-align<\/code> kullan\u0131m\u0131, inline elementlerdeki davran\u0131\u015f\u0131ndan daha basittir \u00e7\u00fcnk\u00fc burada bir “sat\u0131r kutusu” kavram\u0131 yerine do\u011frudan h\u00fccrenin kendi dikey alan\u0131 referans al\u0131n\u0131r. Bu nedenle, tablo tabanl\u0131 d\u00fczenlerde i\u00e7erikleri dikeyde hizalamak genellikle olduk\u00e7a kolayd\u0131r.<\/p>\nvertical-align’\u0131n S\u0131n\u0131rlamalar\u0131 ve Yayg\u0131n Yanl\u0131\u015f Anlamalar<\/h3>\n
vertical-align<\/code> \u00f6zelli\u011finin g\u00fcc\u00fcne ra\u011fmen, ne zaman ve nas\u0131l kullan\u0131laca\u011f\u0131 konusunda baz\u0131 \u00f6nemli s\u0131n\u0131rlamalar ve yayg\u0131n yanl\u0131\u015f anlamalar bulunmaktad\u0131r.<\/p>\nBlok Seviyesi Elementlerde \u00c7al\u0131\u015fmaz<\/h4>\n
Bu, vertical-align<\/code> ile ilgili en yayg\u0131n yanl\u0131\u015f anlamad\u0131r. vertical-align<\/code> \u00f6zelli\u011fi, bir blok seviyesi<\/em> elementi (\u00f6rne\u011fin bir div<\/code> veya p<\/code> etiketi) bir kapsay\u0131c\u0131 blok elementin i\u00e7inde<\/em> dikeyde ortalamak veya hizalamak i\u00e7in kullan\u0131lamaz<\/strong>. vertical-align<\/code> yaln\u0131zca sat\u0131r i\u00e7i (inline-level) ve tablo h\u00fccresi (table-cell) elementler \u00fczerinde etkilidir.<\/p>\nBir blok elementi dikeyde hizalamak i\u00e7in farkl\u0131 CSS teknikleri kullanmak gerekir:<\/p>\n
* Flexbox:<\/strong> display: flex; align-items: center;<\/code> veya justify-content: center;<\/code> (e\u011fer flex-direction<\/code> column ise).
\n* CSS Grid:<\/strong> display: grid; align-items: center;<\/code> veya place-items: center;<\/code>.
\n* Absolute Positioning ve Transform:<\/strong> position: absolute; top: 50%; transform: translateY(-50%);<\/code>.
\n* Margin Auto:<\/strong> Sadece dikeyde ortalamak i\u00e7in, elementin belirli bir y\u00fcksekli\u011fi varsa ve display: block<\/code> ise, margin-top: auto; margin-bottom: auto;<\/code> (ancak bu, Flexbox veya Grid ba\u011flam\u0131nda daha iyi \u00e7al\u0131\u015f\u0131r).<\/p>\nInline-Block Elementlerde Kullan\u0131m\u0131<\/h4>\n
display: inline-block<\/code> olarak ayarlanm\u0131\u015f elementler, vertical-align<\/code> \u00f6zelli\u011finden etkilenir. Bu, vertical-align<\/code>‘\u0131n en yayg\u0131n ve faydal\u0131 kullan\u0131m durumlar\u0131ndan biridir. \u00d6rne\u011fin, bir metinle birlikte bir buton veya bir ikonun dikeyde hizalanmas\u0131 gerekti\u011finde inline-block<\/code> ve vertical-align<\/code> kombinasyonu kullan\u0131l\u0131r.<\/p>\n.icon {\n display: inline-block;\n vertical-align: middle; \/ \u0130konu metnin ortas\u0131na hizala <\/em>\/\n width: 20px;\n height: 20px;\n}\n.text {\n vertical-align: middle; \/ Metni ikonun ortas\u0131na hizala <\/em>\/\n}<\/code><\/pre>\nBu \u00f6rnekte, hem ikon hem de metin vertical-align: middle;<\/code> ile birbirlerinin ortas\u0131na hizalan\u0131r.<\/p>\nG\u00f6rsel Bo\u015fluk Sorunu (Image Gap Issue)<\/h4>\n
Resimlerin (![]()
<\/code> elementleri) alt\u0131nda varsay\u0131lan olarak k\u00fc\u00e7\u00fck bir bo\u015fluk olu\u015fmas\u0131, vertical-align: baseline;<\/code> varsay\u0131lan de\u011ferinden kaynaklanan yayg\u0131n bir sorundur. Resimler, metin taban \u00e7izgisiyle hizaland\u0131\u011f\u0131nda, fontun inen k\u0131s\u0131mlar\u0131 (\u00f6rne\u011fin ‘g’, ‘j’, ‘p’, ‘q’, ‘y’ harflerinin alt k\u0131s\u0131mlar\u0131) i\u00e7in ayr\u0131lan bo\u015fluk resmin alt\u0131nda kal\u0131r.<\/p>\nBu bo\u015flu\u011fu gidermek i\u00e7in birka\u00e7 y\u00f6ntem vard\u0131r:<\/p>\n
* display: block;<\/code>:<\/strong> Resme display: block;<\/code> uygulamak, onu bir blok seviyesi elemente d\u00f6n\u00fc\u015ft\u00fcr\u00fcr ve art\u0131k sat\u0131r i\u00e7i ba\u011flamda vertical-align<\/code> kurallar\u0131na tabi olmaz.
\n* vertical-align: top;<\/code> \/ middle;<\/code> \/ bottom;<\/code>:<\/strong> Resme vertical-align: top;<\/code>, vertical-align: middle;<\/code> veya vertical-align: bottom;<\/code> uygulamak, resmin taban \u00e7izgisini de\u011fi\u015ftirerek bu bo\u015flu\u011fu ortadan kald\u0131r\u0131r. vertical-align: bottom;<\/code> genellikle en etkili \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\nimg {\n vertical-align: bottom; \/ Veya middle, top <\/em>\/\n \/ display: block; de kullan\u0131labilir <\/em>\/\n}<\/code><\/pre>\nPratik Uygulamalar ve \u00d6rnekler<\/h3>\n
vertical-align<\/code> \u00f6zelli\u011fi, web aray\u00fczlerinde bir\u00e7ok pratik senaryoda kullan\u0131l\u0131r.<\/p>\nResim ve Metin Hizalama<\/h4>\n
K\u00fc\u00e7\u00fck ikonlar\u0131 veya logolar\u0131 metinle ayn\u0131 hizada tutmak, vertical-align<\/code>‘\u0131n en yayg\u0131n kullan\u0131m alanlar\u0131ndan biridir.<\/p>\n\n ![\"Bilgi\"](\"info-icon.png\")
\n Bu \u00f6nemli bir bilgidir.\n<\/p><\/code><\/pre>\n
.icon {\n vertical-align: middle; \/ \u0130konu metnin ortas\u0131na hizalar <\/em>\/\n margin-right: 5px;\n}<\/code><\/pre>\nBu, ikonun metinle g\u00f6rsel olarak daha uyumlu g\u00f6r\u00fcnmesini sa\u011flar.<\/p>\n
Navigasyon Men\u00fcs\u00fc \u00d6\u011feleri<\/h4>\n
Bazen navigasyon men\u00fclerinde, linklerin veya di\u011fer \u00f6\u011felerin dikeyde ortalanmas\u0131 gerekebilir, \u00f6zellikle farkl\u0131 boyutlarda ikonlar veya metinler kullan\u0131ld\u0131\u011f\u0131nda.<\/p>\n