Deskripsi
The vertical-align properti menentukan alignment teks dalam garis, atau dalam sel tabel.
Nilai yang Mungkin
baseline - Garis dasar elemen sejajar dengan garis dasar elemen induk.
sub - Garis dasar elemen diturunkan ke titik yang sesuai untuk teks yang di-subskripsikan.
super - Garis dasar elemen dinaikkan ke titik yang sesuai untuk teks superskrip.
top - Bagian atas kotak elemen sejajar dengan bagian atas kotak baris, dalam konteks konten sebaris, atau dengan bagian atas sel tabel dalam konteks tabel.
text-top - Bagian atas kotak elemen sejajar dengan bagian atas kotak sebaris tertinggi di baris.
middle - Garis dasar elemen sejajar dengan titik yang ditentukan oleh garis dasar elemen induk ditambah setengah x-tinggi font elemen induk, dalam konteks konten sebaris.
bottom - Bagian bawah kotak elemen sejajar dengan bagian bawah kotak baris, dalam konteks konten sebaris, atau dengan bagian bawah sel tabel dalam konteks tabel.
text-bottom - Bagian bawah kotak elemen sejajar dengan bagian bawah kotak sebaris terendah di baris.
percentage - Garis dasar elemen dinaikkan atau diturunkan dengan persentase nilai yang diberikan untuk ketinggian garis properti.
length- Garis dasar elemen dinaikkan atau diturunkan dengan nilai panjang yang diberikan. Nilai panjang negatif diizinkan untuk properti ini. Nilai panjang 0 untuk properti ini memiliki efek yang sama seperti nilai baseline.
Berlaku untuk
elemen tingkat sebaris dan elemen dengan tampilan sel tabel.
Sintaks DOM
object.style.verticalAlign = "baseline";
Contoh
Inilah contohnya -
<html>
<head>
</head>
<body>
<table style = "height:200px; width:400px;border:1px solid red;">
<tr>
<td style = "vertical-align:bottom;" >
<p>This will be aligned to bottom of the cell.</p>
</td>
</tr>
</table>
</body>
</html>
Ini akan menghasilkan hasil sebagai berikut -