css vertical-align, Html elementi içerisindeki metinlerin dikey hizalama işlemleri için kullanılır. Bazı kelimelerde üst veya alt metin oluşturmak için çok kullanırız. Örneğin metre kare yazarken iki karakterini üst simge yazmak gibi…
Aldığı parametreler:
baseline : Alt köşeden başlar.
length : Uzunluk değeri
% : Yüzde değeri
sub : Alt simge
super : Üst simge
top : En üstten hizalar.
text-top : Metnin veya içeriğin üst hizasından
middle : Ortadan
bottom : En alttan hizalar.
text-bottom : Metnin veya içeriğin üst hizasından
inherit : Bir üstteki elementten miras alır.
initial : Varsayılan değere çevirir.
Örnek :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{font-size:30px}
span{font-size:16px}
.one { vertical-align: sub; }
.two { vertical-align:super }
.three { vertical-align:top; }
.four { vertical-align:5px; }
.five { vertical-align:middle; }
</style>
</head>
<body>
<div>
H <span class="one"> 2 </span>O
</div>
<div>
m<span class="two">3 </span>
</div>
<div>
Tasarım <span class="three">ve </span> Yazılım
</div>
<div>
Tasarım <span class="four">ve </span> Yazılım
</div>
<div>
Tasarım <span class="five">ve </span> Yazılım
</div>
</body>
</html>Html Çıktısı:
Başka bir yazımızda görüşmek üzere…
