Memanfaatkan Fungsi Properti Vertical Align Pada CSS

Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di Kursus Web Design, tempat kursus terbaik dan nomor satu. Kali ini saya akan membahas tentang cara Memanfaatkan Fungsi Properti Vertical Align Pada CSS.

Dimana vertical align berfungsi untuk menetapkan keselarasan vertikal dari elemen. Dimana values dari property vertical align ada 10, yaitu:

Baseline yaitu berfungsi untuk sejajarkan baseline elemen dengan garis dasar elemen induk. Ini adalah defaultÂ·
Length yaitu berfungsi untuk meningkatkan atau menurunkan elemen dengan panjang Â yang ditentukan. Nilai negatif diperbolehkanÂ·
% yaitu berfungsi untuk meningkatkan atau menurunkan elemen dalam persen properti “garis-tinggi”. Nilai negatif diperbolehkanÂ·
Sub yaitu berfungsi untuk sejajarkan elemen seolah-olah itu adalah subskripÂ·
Super yaitu berfungsi untuk sejajarkan elemen seolah-olah itu adalah superskripÂ·
Top yaitu berfungsi untuk bagian atas elemen sejajar dengan bagian atas elemen tertinggi di suatu baris.Â·
Text-Top yaitu berfungsi untuk bagian atas elemen sejajar dengan bagian atas font elemen indukÂ·
Middle yaitu berfungsi untuk sejajarkan elemen ditempatkan di tengah elemen indukÂ·
Bottom yaitu berfungsi untuk bagian bawah elemen sejajar dengan elemen terendah di suatu barisÂ·
Text-Bottom yaitu berfungsi untuk bagian atas elemen sejajar dengan bagian atas font elemen induk

Oke, untuk kali ini saya akan menggunakan 3 value untuk perbandingan, yaitu top middle dan bottom. Langkah pertama untuk Memanfaatkan Fungsi Properti Vertical Align Pada CSS adalah membuat struktur htmlnya terlebih dahulu. Seperti pada script di bawah ini ya teman-teman.

<!DOCTYPE html>
<html>
<head>
	<title>Memanfaatkan Fungsi Properti Vertical Align Pada CSS</title>
</head>
<body>
	<h1><img src="../img/img5.jpg" class="top"><span>DUMET</span> school</h1>
	<h1><img src="../img/img5.jpg" class="middle"><span>DUMET</span> school</h1>
	<h1><img src="../img/img5.jpg" class="bottom"><span>DUMET</span> school</h1> </body>
</html>

Jika sudah selesai, saya akan mulai membuat style cssnya, seperti pada script di bawah ini.

<style type="text/css">
	h1{font-size: 50px; color:grey;}
	span{color:blue;}
	.top { vertical-align: top; }
	.middle{ vertical-align: middle; }
	.bottom {vertical-align: bottom;}
</style>

Jika teman-teman sudah selesai, maka bisa langsung lihat di browernya. Dan tampilannya akan menjadi seperti pada gambar di bawah ini.

Demikian artikel tentang Memanfaatkan Fungsi Properti Vertical Align Pada CSS. Semoga bermanfaat dan selamat mencoba ya teman-teman.

Memanfaatkan Fungsi Properti Vertical Align Pada CSS

Kategori