CSS'de vertical-align Nedir?

CSS'de vertical-align, inline veya table-cell olarak belirlenen bir öğenin diğer öğelerle ilişkili dikey hizalamasını kontrol eden bir özelliktir. Bu özellik, öğenin içeriğinin konumuna göre çalışır ve varsayılan değeri baseline'dir.
Baseline, yazı tipi boyutuna ve stile göre değişebilen bir çizgidir. Örneğin, bir metin kutusunun baseline'ı genellikle metnin altındaki alt vurgu işareti (underscore) ile aynı hizada olacaktır.
Bu özellik, inline öğeler (span, a, strong vb.) ve table-cell şeklinde şablonlar oluşturmak için kullanılan table elementleri için kullanılabilir.
Örnek olarak, inline bir öğenin altındaki bir resmi dikey olarak hizalamak isterseniz, vertical-align özelliğini kullanabilirsiniz. Aşağıdaki kod bu örneği göstermektedir:
```CSS
img {
vertical-align: middle;
}
```
Bu kod altındaki resmi, içinde yer aldığı inline öğenin ortasına dikey olarak hizalar. Bu, resmin metin içindeki konumunu düzeltmek için sıklıkla kullanılır.
Table-cells üzerinde vertical-align özelliği, öğeleri içindeki hücrelerin üst, orta veya alt kısımlarına hizalamak için kullanılabilir. Aşağıdaki örnek kod, bir tablo hücresindeki öğeleri ortalamak için kullanılır:
```CSS
td {
vertical-align: middle;
}
```
Bu kod, bir hücredeki öğeleri, hücrenin ortasına dikey olarak hizalar.
Vertical-align özelliği, oldukça kullanışlı bir özelliktir ve doğru kullanıldığında, içerikleri dikey olarak hizalamakta etkili bir araçtır.