Salah satu property dalam kode css adalah vertical-align. Mungkin kode css ini masih terasa asing bagi beberapa blogger karena memang sangat jarang digunakan. CSS vertical-align property berlaku pada elemen image dan digunakan bersama teks. Property vertical-align berfungsi mengatur penempatan teks secara vertical di sebelah kanan dan/atau kiri sebuah image. Ada beberapa posisi penempatan teks yang bisa dipergunakan dan pengaturannya dilakukan melalui beberapa nilai/value yang sudah ditentukan. Selain pada elemen image, vertical-align property juga bisa dipergunakan pada elemen table-cell.
Value/nilai dan deklarasi css vertical-align property
- Value » baseline, top, text-top, bottom, sub, middle, super, length (px, pt, em, etc) serta % (persen).
- Deklarasi » text-align:value;
Contoh vertical-align property pada elemen image
<style type="text/css">
.meong{
padding:10px;
background:lightblue;
margin:10px 0;
font-size:50px;
letter-spacing:-1px;
}
.meong img{
vertical-align:middle;
margin-right:20px;
}
</style>
<p class="meong">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj01aLlsFCWKv-0f-2A1AIXd_LxvMzyJ6-SrzAKryrkIAIDSGGNLfmqP9vgrwChTG7gIbfcdZYHAJUcwrPa4Nnp-SzQ-VYAQPnam7czJZbs47T-CofLnLJOjE-__BQG9L0_xaKGTYvXtCjY/s120/gambar-kucing-300x300.jpg" width="120" height="120" alt="Kucing garong />
Kucing Garong
</p>
Contoh vertical-align property pada elemen tabel-cell
<style type="text/css">
#div_tabel {
display:table;
width:400px;
height:100px;
padding:20px;
margin:20px auto;
background:#aaa;
}
#div_tabel_cell {
display:table-cell;
background:lightblue;
vertical-align:middle;
}
.div_konten {
padding:0 10px;
}
</style>
<div id="div_tabel">
<div id="div_tabel_cell">
<div class="div_konten">
tabel-cell » Posisi teks di awal konten ditentukan melalui CSS vertical-align property.
</div>
</div>
</div>
Untuk mengetahui seberapa jauh fungsi dan kegunaan setiap value/nilai css vertical-align property, dalam demo online melalui online html editor di bawah ini telah disertakan beberapa bentuk demo berikut kode css dan xhtml. Edit kode dan perhatikan berbagai pengaruh teks (jumlah karakter dan ukuran teks) terhadap image. Perhatikan juga efek setiap nilai terhadap posisi teks terhadap bidang disekitarnya.
Please click the button to display. Continue with editing code and click to see the results!
Tidak ada komentar:
Posting Komentar