Vertical-Align ~ Pemrograman dan Teknologi

Untuk meletakkan teks di tengah secara horisontal, kalian bisa menggunakan text-align dengan nilai center. Kalian juga bisa meletakkan teks di sebelah kanan dengan memberikan nilai right. Selain mengatur posisi teks secara horisontal, kalian bisa mengatur posisi vertikal teks di dalam satu baris seperti saat kalian menggunakan tag dan .

Properti yang bisa kalian gunakan untuk mengatur posisi teks berdasarkan posisi vertikal adalah vertical-align. Properti tersebut bisa kalian gunakan pada kolom tabel. Kalian bisa juga menggunakannya pada paragraf atau elemen HTML yang mempunyai nilai "inline" dan sejenisnya pada properti display-nya. Kalian tidak bisa menggunakan ini pada tag div dan section yang display-nya memiliki nilai "block".

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <style>
    	td{
    	    height :100px;
            border : double red 4px;
    	}
        img{
        	width:32px;
        }
    </style>
</HEAD>
<BODY>
    <H1>Belajar HTML</H1>
    <table>
        <tr>
            <td style="vertical-align:top">Atas</td>
            <td style="vertical-align:middle">Tengah</td>
            <td style="vertical-align:bottom">Bawah</td>
        </tr>
    </table>
    <p>A<span style="vertical-align:sub">sub</span></p>
    <p>A<span style="vertical-align:super">super</span></p>
    <p>A<img src="gambarku.jpeg" style="vertical-align:baseline"></p>
    <p>A<img src="gambarku.jpeg" style="vertical-align:text-top"></p>
    <p>A<img src="gambarku.jpeg" style="vertical-align:text-bottom"></p>
</BODY>
</HTML>

Contoh di atas menggunakan tabel yang diberi properti vertical-align pada setiap kolomnya. Selain itu, ada juga beberapa paragraf yang berisi tag dan gambar dengan properti vertical-align yang berbeda-beda. Kegunaan masing-masing nilai bisa kalian tebak sendiri berdasarkan pengaruhnya pada teks dan gambar yang diberi properti vertical-align. Jika belum paham, kegunaan nilai-nilai tersebut bisa kalian lihat di bawah ini.

Top : meletakkan elemen HTML di atas petak tabel atau berdasarkan bagian atas elemen tertinggi.
Middle : meletakkan elemen HTML di tengah petak tabel atau elemen parent-nya.
Bottom : meletakkan elemen HTML di bawah petak tabel atau elemen parent-nya.
Text-bottom : meletakkan elemen HTML sejajar dengan bagian bawah teks di dalam satu baris.
Text-top : meletakkan elemen HTML sejajar dengan bagian atas teks di dalam satu baris.
Super : Letaknya seperti saat kalian menggunakan tag .
Sub : Letaknya seperti saat kalian menggunakan tag .

Selain dengan nilai-nilai di atas, kalian juga bisa memberikan nilai berupa angka dengan persentase atau satuan lainnya. Nilai vertical-align dengan angka negatif akan membuat elemen berada di bawah teks dalam satu baris Sebaliknya, nilai positif akan membuat elemen HTML berada di atas teks.