Mengatur Rataan Vertikal HTML Menggunakan verticalAlign Style DOM
Properti verticalAlign Style DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai perataan vertikal dari konten pada suatu elemen.
Sebelum memahami lebih dalam materi tentang Mengatur Rataan Vertikal HTML Menggunakan verticalAlign Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Nilai Seleksi HTML Menggunakan userSelect Style DOM, Properti unicodeBidi Style HTML DOM dan Fungsinya, dan Mengatur Jeda Transisi HTML Menggunakan transitionDelay Style DOM.
Sintak:
Property Values:
Return Values: Digunakan untuk mengembalikan sebuah nilai string yang merepresentasikan perataan secara vertikal dari konten elemen.
Sintak:
- Mengembalikan nilai properti VerticalAlign: object.style.verticalAlign
- Mengatur nilai properti VerticalAlign: object.style.verticalAlign = value
Property Values:
- length: Digunakan untuk menaikkan atau menurunkan posisi elemen sesuai dengan nilai length yang diberikan.
- %: Digunakan untuk menaikkan atau menurunkan posisi elemen dalam satuan persen dari ukuran properti "line-height".
- baseline: Merupakan nilai default dari properti verticalAlign, yang digunakan untuk menentukan perataan baris dasar dari elemen yang berasal dari baris dasar elemen parent.
- sub: Digunakan untuk menentukan perataan elemen sebagai nilai subscript.
- super: Digunakan untuk menentukan perataan elemen sebagai nilai superscript.
- top: Digunakan untuk menentukan perataan elemen ke nilai top dari elemen tertinggi pada suatu baris.
- text-top: Digunakan untuk menentukan perataan elemen top dari elemen parent font.
- middle: Digunakan untuk menempatkan elemen pada posisi tengah dari elemen parent.
- bottom: Digunakan untuk menempatkan elemen pada posisi bottom atau bawah, dimana elemennya berada pada bagian paling bawah dari baris.
- text-bottom: Digunakan untuk menentukan perataan bagian bawah dari elemen.
- initial: Digunakan untuk mengatur nilai properti VerticalAlign ke nilai default-nya.
- inherit: Digunakan untuk menerima nilai turunan properti dari elemen parent.
Return Values: Digunakan untuk mengembalikan sebuah nilai string yang merepresentasikan perataan secara vertikal dari konten elemen.
Contoh: Memperlihatkan properti bottom.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style verticalAlign
DOM pada HTML
</title>
</head>
<body>
<h1>
<center>
Properti DOM VerticalAlign
<button
onclick="align()">
Press
</button>
</center>
</h1>
<h3>
Klik tombol 'Press' untuk
mengarahkan teks secara
vertikal dari posisi bawah.
</h3>
<style>
table
{
border: 4px solid black;
height: 200px;
width: 600px;
}
</style>
<table>
<tr>
<td id="myTd">
<center>
<h1>
Blog Elfan
</h1>
</center>
</td>
</tr>
</table>
<br>
<script>
function align()
{
// Pengaturan align bottom.
document.getElementById(
"myTd").style.verticalAlign=
"bottom";
}
</script>
</body>
</html>
Output:
Properti DOM VerticalAlign
Klik tombol 'Press' untuk mengarahkan teks secara vertikal dari posisi bawah.
Blog Elfan |
Contoh: Memperlihatkan properti top.
Contoh: Memperlihatkan properti baseline.
Contoh: Memperlihatkan properti initial.
Contoh: Memperlihatkan properti inherit.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style verticalAlign
DOM pada HTML
</title>
</head>
<body>
<h1>
<center>
Properti VerticalAlign DOM
<button
onclick="align()">
Press
</button>
</center>
</h1>
<h3>
Klik tombol 'Press' untuk
mengarahkan teks vertikal dari
posisi atas.
</h3>
<style>
table
{
border: 4px solid black;
height: 200px;
width: 600px;
}
</style>
<table>
<tr>
<td id="myTd">
<h1>
<center>
Blog TIK
</center>
<h1>
</td>
</tr>
</table>
<br>
<script>
function align()
{
// Pengaturan align top.
document.getElementById(
"myTd").style.verticalAlign=
"top";
}
</script>
</body>
</html>
Output:
Properti VerticalAlign DOM
Klik tombol 'Press' untuk mengarahkan teks vertikal dari posisi atas.
|
Contoh: Memperlihatkan properti baseline.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style verticalAlign
DOM pada HTML
</title>
</head>
<body>
<h1>
<center>
Properti VerticalAlign DOM
<button
onclick="align()">
Press
</button>
</center>
</h1>
<h3>
Klik tombol 'Press' untuk
perataan teks secara vertikal
dengan baseline dari parent.
</h3>
<style>
table
{
border: 4px solid black;
height: 200px;
width: 600px;
}
</style>
<table>
<tr>
<td id="myTd">
<h1>
<center>
Blog Elfan
</center>
<h1>
</td>
</tr>
</table>
<br>
<script>
function align()
{
// Pengaturan align baseline
document.getElementById(
"myTd").style.verticalAlign=
"baseline";
}
</script>
</body>
</html>
Output:
Properti VerticalAlign DOM
Klik tombol 'Press' untuk perataan teks secara vertikal dengan baseline dari parent.
|
Contoh: Memperlihatkan properti initial.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style verticalAlign
DOM pada HTML
</title>
</head>
<body>
<h1>
<center>
Properti DOM VerticalAlign
<button
onclick="align()">
Press
</button>
</center>
</h1>
<h3>
Klik tombol 'Press' untuk
melakukan perataan secara
vertikal ke posisi initial.
</h3>
<style>
table
{
border: 4px solid black;
height: 200px;
width: 600px;
}
</style>
<table>
<tr>
<td id="myTd">
<h1>
<center>
Blog TIK
</center>
<h1>
</td>
</tr>
</table>
<br>
<script>
function align()
{
// Pengaturan align initial
document.getElementById(
"myTd").style.verticalAlign=
"initial";
}
</script>
</body>
</html>
Output:
Properti DOM VerticalAlign
Klik tombol 'Press' untuk melakukan perataan secara vertikal ke posisi initial.
|
Contoh: Memperlihatkan properti inherit.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style verticalAlign
DOM pada HTML
</title>
</head>
<body>
<h1>
<center>
Properti DOM VerticalAlign
<button
onclick="align()">
Press
</button>
</center>
</h1>
<h3>
Klik tombol 'Press' untuk
melakukan perataan teks secara
vertikal untuk menerima posisi
turunan.
</h3>
<style>
table
{
border: 4px solid black;
height: 200px;
width: 600px;
}
</style>
<table>
<tr>
<td id="myTd">
<h1>
<center>
Blog TIK
</center>
<h1>
</td>
</tr>
</table>
<br>
<script>
function align()
{
// Pengaturanalign inherit
document.getElementById(
"myTd").style.verticalAlign=
"inherit";
}
</script>
</body>
</html>
Output:
Properti DOM VerticalAlign
Klik tombol 'Press' untuk melakukan perataan teks secara vertikal untuk menerima posisi turunan.
|
Baca Juga:
Mengatur rataan vertikal pada elemen-elemen dalam halaman web merupakan salah satu aspek penting dalam desain antarmuka. Salah satu cara untuk melakukan hal ini adalah dengan menggunakan properti gaya verticalAlign yang terdapat pada objek style dalam HTML DOM. Properti ini memberikan kemampuan untuk mengatur posisi elemen secara vertikal dalam hubungan dengan elemen lainnya.
Dalam konteks pengembangan halaman web, seringkali diperlukan elemen-elemen yang harus disejajarkan dengan elemen lainnya. Rataan vertikal ini tidak hanya penting untuk elemen teks, tetapi juga untuk berbagai jenis elemen seperti gambar, tabel, dan elemen berbasis blok lainnya. Properti verticalAlign adalah cara yang efisien dan efektif untuk mencapai rataan yang tepat pada berbagai elemen di dalam suatu halaman.
Secara umum, verticalAlign mempengaruhi posisi vertikal elemen terkait terhadap elemen di sekitarnya, dengan mempertimbangkan konteks pengaturan elemen tersebut. Properti ini dapat digunakan pada elemen-elemen seperti teks dalam sebuah paragraf atau gambar dalam baris teks. Sebagai contoh, dalam sebuah daftar yang berisi gambar dan teks, properti ini bisa digunakan untuk memastikan bahwa gambar sejajar dengan teks dalam satu baris. Ini sangat penting ketika gambar atau ikon digunakan untuk mendukung informasi teks, agar tata letak halaman terlihat lebih bersih dan terorganisir.
Namun, tidak semua elemen dapat dipengaruhi oleh properti verticalAlign. Biasanya, properti ini diterapkan pada elemen-elemen dalam konteks baris atau baris inline. Elemen-elemen blok seperti div atau artikel, yang pada dasarnya membentuk blok besar pada halaman, tidak dipengaruhi oleh properti ini. Oleh karena itu, penting untuk mengetahui jenis elemen yang ingin diratakan dan konteks penggunaannya sebelum memutuskan untuk menggunakan properti verticalAlign.
Salah satu hal yang perlu diperhatikan adalah pengaruh verticalAlign terhadap elemen inline dan inline-block. Untuk elemen-elemen jenis ini, properti verticalAlign akan sangat efektif dalam mengatur rataan vertikalnya. Sebagai contoh, dalam sebuah daftar yang berisi gambar dan teks, properti ini bisa digunakan untuk memastikan bahwa gambar sejajar dengan teks dalam satu baris. Ini sangat penting ketika menampilkan teks dan gambar bersama dalam satu baris. Dengan menggunakan middle, elemen-elemen tersebut akan terlihat sejajar secara vertikal, memberikan tampilan yang lebih simetris dan seimbang.
Selain itu, ada juga nilai bottom, yang akan menempatkan elemen di bagian bawah baris atau elemen sekitarnya. Pengaturan ini bisa berguna ketika elemen tersebut, misalnya gambar atau ikon, harus diletakkan di bawah teks atau elemen lain dalam satu baris. Ini memberi fleksibilitas dalam mengatur desain elemen-elemen yang lebih kompleks, seperti dalam formulir atau tabel yang berisi elemen multimedia.
Selain nilai-nilai yang telah disebutkan, ada juga nilai baseline, yang mengatur elemen untuk sejajar dengan garis dasar teks pada baris tersebut. Pengaturan ini lebih spesifik digunakan dalam pengolahan teks atau elemen teks dalam baris, dimana elemen harus berhubungan langsung dengan teks yang mengalir dalam baris yang sama. Ini sangat berguna ketika mengolah elemen-elemen seperti tulisan yang mengandung karakter dengan tinggi berbeda-beda, sehingga posisi garis dasar teks dapat dijaga tetap konsisten.
Meskipun verticalAlign menawarkan banyak fleksibilitas dalam pengaturan rataan vertikal, penggunaannya tetap bergantung pada jenis elemen dan tata letak secara keseluruhan. Pada elemen-elemen berbentuk blok atau elemen yang tidak inline, penggunaan properti ini mungkin tidak memberikan hasil yang diinginkan. Oleh karena itu, dalam banyak kasus, elemen-elemen tersebut harus dikendalikan menggunakan teknik pengaturan lain seperti flexbox atau grid, yang memungkinkan kontrol yang lebih kompleks terhadap tata letak.
Selain itu, dalam penggunaan properti verticalAlign, ada hal-hal lain yang perlu dipertimbangkan, seperti ukuran elemen yang dipengaruhi. Properti ini tidak akan bekerja dengan baik jika elemen yang digunakan memiliki ukuran yang sangat besar atau kecil dibandingkan dengan elemen sekitarnya. Dalam kasus seperti ini, perlu penyesuaian lebih lanjut untuk memastikan elemen tetap rapi dan seimbang di dalam konteks desain yang lebih luas.
Penggunaan verticalAlign juga sangat bergantung pada gaya keseluruhan dari halaman web. Dalam desain web responsif, properti ini dapat membantu memastikan bahwa elemen tetap terlihat teratur, bahkan ketika tampilan halaman berubah untuk berbagai ukuran layar. Misalnya, pada layar yang lebih kecil, elemen-elemen yang sejajar secara vertikal tetap akan terlihat proporsional, sehingga tampilan halaman tetap nyaman dipandang dan mudah dinavigasi.
Namun, seperti halnya dengan banyak aspek desain web lainnya, penting untuk tidak bergantung sepenuhnya pada satu metode atau properti untuk mengatur tata letak elemen. VerticalAlign adalah alat yang sangat berguna, tetapi dalam beberapa kasus, metode lain seperti pengaturan margin, padding, atau bahkan penggunaan teknik lain seperti flexbox dan grid dapat memberikan hasil yang lebih optimal. Dengan memadukan berbagai teknik dan properti gaya, pengembang dapat memastikan bahwa elemen-elemen dalam halaman web tidak hanya sejajar secara vertikal, tetapi juga memberikan pengalaman visual yang lebih menyenangkan bagi pengguna.
Secara keseluruhan, properti verticalAlign pada objek style dalam HTML DOM adalah alat yang sangat efektif untuk mengatur rataan vertikal elemen-elemen dalam sebuah halaman web. Dengan pemahaman yang baik tentang bagaimana properti ini bekerja, serta perhatian terhadap konteks penggunaan dan jenis elemen yang sedang dikerjakan, seorang pengembang dapat menciptakan desain yang lebih terorganisir, simetris, dan menyenangkan untuk dilihat.
Untuk meningkatkan pemahaman lebih lanjut mengenai penerapan properti verticalAlign, penting untuk meninjau bagaimana properti ini berfungsi dalam berbagai kondisi yang berbeda. Salah satu aplikasi utama dari properti ini adalah ketika elemen-elemen teks perlu disejajarkan dengan elemen gambar dalam baris yang sama. Dalam situasi seperti ini, penggunaan verticalAlign memungkinkan elemen-elemen tersebut, seperti gambar atau ikon, untuk sejajar dengan teks dalam satu level yang sama, memberikan kesan harmonis dan keteraturan.
Selain itu, penggunaan properti verticalAlign dalam tata letak tabel juga sangat bermanfaat. Dalam elemen tabel, baris dan kolom dapat berisi berbagai jenis data yang memerlukan perhatian terhadap penyusunan elemen-elemen agar tampil rapi. Penggunaan verticalAlign dapat membantu dalam menentukan posisi vertikal konten dalam setiap sel, sehingga menciptakan tampilan yang konsisten dan mudah dibaca. Hal ini terutama penting ketika tabel memuat data yang mencakup teks, angka, atau gambar. Dengan demikian, tata letak tabel dapat lebih efisien, dan informasi yang disajikan akan lebih mudah dipahami oleh pengunjung halaman web.
Selain itu, dalam pengembangan desain responsif, verticalAlign memiliki peran penting untuk memastikan bahwa elemen-elemen pada halaman web tetap terlihat rapi saat tampilan halaman beradaptasi dengan berbagai ukuran layar. Pengaturan rataan vertikal yang tepat akan membantu memastikan bahwa elemen-elemen seperti teks dan gambar tidak saling bertabrakan atau terlihat tidak teratur ketika tampilan diubah untuk ukuran layar yang lebih kecil. Hal ini akan memberikan pengalaman pengguna yang lebih baik, dengan menghindari elemen yang tumpang tindih atau posisi yang tidak diinginkan. Penggunaan verticalAlign, dalam hal ini, dapat membantu mendukung desain web yang responsif dan mudah diakses di berbagai perangkat.
Namun demikian, meskipun verticalAlign memberikan kemudahan dalam pengaturan rataan vertikal, pengembang tetap harus mempertimbangkan kombinasi dengan teknik lainnya untuk mencapai desain yang lebih kompleks. Dalam beberapa kasus, menggunakan teknik lain seperti flexbox atau grid dapat memberikan fleksibilitas yang lebih besar dalam mengatur tata letak elemen. Flexbox dan grid memungkinkan pengaturan elemen dalam kolom dan baris secara lebih terstruktur, memudahkan pembuatan desain yang lebih dinamis dan responsif. Oleh karena itu, meskipun verticalAlign efektif dalam situasi tertentu, pengembang perlu memanfaatkan berbagai teknik untuk mencapai hasil yang optimal dalam desain antarmuka web.
Hal lain yang perlu dipertimbangkan adalah dampak penggunaan verticalAlign terhadap elemen-elemen yang lebih kompleks, seperti formulir atau antarmuka pengguna interaktif. Dalam kasus ini, pengaturan rataan vertikal harus dipadukan dengan prinsip-prinsip desain antarmuka yang lebih luas, seperti pemilihan jarak antar elemen (spasi), perataan elemen-elemen input, dan keseragaman dalam pengaturan elemen-elemen visual. Dengan demikian, verticalAlign hanya menjadi salah satu alat dalam menciptakan desain yang berfungsi secara optimal dan menarik secara visual.
Sementara itu, pengaruh penggunaan verticalAlign terhadap elemen-elemen yang memiliki ukuran berbeda juga perlu diperhatikan. Elemen yang lebih besar atau lebih kecil dari elemen lainnya dapat mempengaruhi cara elemen-elemen tersebut terlihat dalam satu baris atau kolom. Dalam kasus ini, penggunaan verticalAlign perlu disesuaikan agar elemen-elemen tersebut tetap sejajar dan tidak saling bertabrakan. Beberapa elemen mungkin memerlukan penyesuaian lebih lanjut, seperti margin atau padding tambahan, untuk memastikan posisi vertikal yang tepat.
Penting juga untuk memahami bahwa penggunaan verticalAlign lebih efektif jika diterapkan dalam konteks elemen-elemen inline atau inline-block. Elemen-elemen ini dirancang untuk berada dalam satu baris dengan elemen lainnya, sehingga verticalAlign akan berfungsi lebih optimal. Sebaliknya, elemen-elemen blok yang membentuk area yang lebih besar biasanya tidak dapat dipengaruhi secara langsung oleh properti verticalAlign. Dalam kasus elemen-elemen blok ini, alternatif pengaturan tata letak lainnya, seperti menggunakan teknik **flexbox** atau **grid**, mungkin lebih sesuai untuk mencapai hasil yang diinginkan.
Akhirnya, dalam desain web yang lebih kompleks, penggunaan verticalAlign dapat dipadukan dengan elemen-elemen lain yang mendukung pengalaman pengguna secara keseluruhan. Misalnya, penggunaan animasi atau transisi dalam tata letak elemen-elemen yang dipengaruhi oleh verticalAlign dapat menciptakan efek visual yang lebih menarik. Oleh karena itu, penting untuk tidak hanya fokus pada penggunaan satu properti gaya, tetapi juga mengkombinasikan berbagai elemen desain untuk menciptakan pengalaman pengguna yang lebih interaktif dan menyenangkan.
Dengan semua hal ini, dapat disimpulkan bahwa properti verticalAlign adalah alat yang sangat berguna dalam pengembangan halaman web, terutama dalam pengaturan rataan vertikal elemen-elemen inline dan inline-block. Meskipun fungsinya tidak berlaku untuk semua jenis elemen, pemahaman yang baik tentang cara kerjanya, serta pengaturan dan kombinasi teknik lain dalam desain, akan memungkinkan pengembang untuk menciptakan antarmuka web yang lebih terorganisir dan menarik secara visual.
Referensi Tambahan:
- 4 Value Properti wordWrap Style DOM pada HTML
- 4 Value Properti zIndex Style DOM pada HTML
- Penggunaan Properti window.closed DOM pada HTML
- Penggunaan Properti window.defaultStatus DOM pada HTML
- Penggunaan Properti window.frameElement DOM pada HTML
- Penggunaan Properti Frame Window DOM pada HTML
- Penggunaan Properti window.innerHeight DOM pada HTML
Artikel ini akan dibaca oleh: Intan Putri Amarilis, Isaac Musaivan Insan Fisabilillah, Ishika Sufa Andori, Jihan Nabila Wafa', dan Jilan Afifah Azzah.
5 komentar untuk "Mengatur Rataan Vertikal HTML Menggunakan verticalAlign Style DOM"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Sebutkan enam browser yang dapat digunakan oleh pengembang dan user untuk mengaktifkan properti verticalAlign Style DOM pada HTML?
BalasHapusBerikut ini ada enam jenis browser yang dapat digunakan untuk mengaktifkan properti verticalAlign Style DOM pada HTML:
Hapusa. Google Chrome
b. Internet Explorer
c. Firefox
d. Opera
e. Safari
f. Attent
Apa yang dimaksud dengan properti verticalAlign DOM pada HTML?
BalasHapusProperti verticalAlign DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai perataan vertikal konten dalam sebuah elemen.
HapusProperti verticalAlign DOM pada HTML adalah properti yang digunakan untuk mengembalikan dan memodifikasi nilai perataan vertikal konten elemen HTML dari suatu dokumen.
Hapus