Bagaimana Memposisikan Elemen Web Dengan Perataan Vertikal CSS

Pencarian Google









Pemandangan
deskripsi






Hutan

Lorem ipsum dolor duduk amet.






Laut

Lorem ipsum dolor duduk amet.

Itu kode HTML di atas membuat halaman web sederhana yang menampilkan empat elemen: teks tertaut, gambar, video tersemat, dan tabel. Seharusnya terlihat seperti ini di browser Anda:

Cara Menyejajarkan Teks Secara Vertikal

Secara default, sebagian besar elemen teks (seperti heading,

, dan

Namun, beberapa elemen teks seperti dan tag sebaris. Akibatnya, mereka mendukung properti perataan vertikal. Untuk meratakan teks secara vertikal, cukup tetapkan nilai yang sesuai ke properti perataan vertikal CSS.

Menggunakan Nilai atas perataan vertikal pada Teks

sebuah {
 vertikal-align: atas;
}

Menambahkan kode CSS di atas ke dokumen HTML dasar akan menyelaraskan bagian atas tag teks dengan bagian atas elemen tertinggi di baris. Menghasilkan tampilan yang diperbarui berikut ini:

Menggunakan Nilai Persentase pada Teks

sebuah {
 vertikal-align: -50%;
}

CSS di atas menyelaraskan elemen teks pada posisi yang 50% di bawah garis dasar elemen induk. Ini menghasilkan output berikut di browser Anda:

Seperti yang Anda lihat pada gambar di atas, elemen teks menempati posisi di bawah elemen gambar dan video, yang berada pada baris yang sama. Untuk memposisikan elemen ini pada atau di atas garis dasar, gunakan nilai persentase positif.

Menggunakan Nilai Panjang pada Teks

sebuah {
 vertikal-align: 90px;
}

Kode di atas menyelaraskan garis dasar elemen teks dengan panjang 90 piksel di atas garis dasar elemen induk. Ini menghasilkan output berikut di browser:

Cara Menyejajarkan Gambar Secara Vertikal

Itu tag adalah elemen sebaris, yang digunakan dengan baik oleh properti perataan vertikal CSS.

Menggunakan Nilai super perataan vertikal pada Gambar

gambar {
 vertikal-align: super;
}

Kode di atas memposisikan gambar pada garis dasar superskrip dari elemen induk. Artinya pada posisi di atas baseline, seperti yang Anda lihat pada output berikut:

Menggunakan Nilai Persentase vertikal-align pada Gambar

gambar {
 vertikal-align: 25%;
}

Kode di atas menyelaraskan garis dasar elemen gambar pada 25% di atas garis dasar elemen induk. Ini menghasilkan efek cermin berikut dari nilai super:

Menggunakan Nilai Panjang sejajar vertikal pada Gambar

gambar {
 perataan vertikal: 5px;
}

Kode di atas menyelaraskan garis dasar elemen gambar pada posisi 5px di atas garis dasar elemen induk. Ini menghasilkan efek yang mirip dengan nilai super dan 25%:

Media yang disematkan seperti video dan iframe adalah elemen HTML sebaris. Oleh karena itu, properti penyelarasan vertikal CSS bekerja sangat baik dengan mereka.

Menggunakan Nilai super perataan vertikal pada Video

video {
 vertikal-align: sub;
}

Kode di atas memposisikan video pada garis dasar subskrip dari elemen induk. Artinya pada posisi di bawah baseline, seperti yang Anda lihat pada output berikut:

Menggunakan Nilai Persentase vertikal-align pada Video

video {
 vertikal-align: -25%;
}

Kode di atas menyelaraskan garis dasar elemen video pada 25% di bawah garis dasar elemen induk. Ini menghasilkan efek cermin berikut dari nilai sub:

Menggunakan Nilai Panjang sejajar vertikal pada Video

video {
 perataan vertikal: -5px;
}

Kode di atas menyelaraskan garis dasar elemen gambar pada posisi 5px di bawah garis dasar elemen induk. Ini menghasilkan efek seperti nilai sub dan -25%:

Cara Menyejajarkan Item Secara Vertikal dalam Tabel

Menggunakan properti vertical-align dengan tabel sedikit rumit, karena tabel adalah elemen blok. Namun,

Menggunakan Nilai atas sejajar vertikal pada Data Tabel

td {
 tinggi: 40 piksel;
 vertikal-align: atas;
}

Kode di atas menambahkan ketinggian 40px ke setiap sel dalam tabel. Ini kemudian menyelaraskan data di setiap sel ke bagian atas setiap baris. Ini menghasilkan output berikut di browser:

Menggunakan Nilai tengah sejajar vertikal pada Data Tabel

td {
 tinggi: 40 piksel;
 vertikal-align: tengah;
}

Nilai tengah perataan vertikal dalam kode di atas secara vertikal memusatkan data di dalam setiap sel. Ini menghasilkan output berikut di browser:

Menggunakan Nilai bawah sejajar vertikal pada Data Tabel

td {
 tinggi: 40 piksel;
 vertikal-align: bawah;
}

Kode di atas menyelaraskan data di setiap sel ke bagian bawah setiap baris. Ini menghasilkan output berikut di browser:

Sekarang Anda Dapat Menyelaraskan Elemen di Halaman Web Anda

Anda sekarang dapat menggunakan properti perataan vertikal CSS dengan sejumlah elemen sebaris yang berbeda, termasuk teks, media yang disematkan, dan data tabel. Aturan umumnya adalah bahwa properti vertical-align hanya berfungsi pada elemen inline dan inline-block.

Namun, Anda dapat menggunakan properti ini pada elemen blok, Anda hanya perlu mengubahnya menjadi elemen inline atau inline-block terlebih dahulu. Ingatlah bahwa Anda dapat menggabungkan perataan vertikal dengan properti perataan lainnya, seperti perataan teks.

Tentang Penulis

Kadeisha Kean (52 Artikel Diterbitkan)

Kadeisha Kean adalah Pengembang Perangkat Lunak Full-Stack dan Penulis Teknis/Teknologi. Dia memiliki kemampuan yang berbeda untuk menyederhanakan beberapa konsep teknologi yang paling kompleks; menghasilkan materi yang dapat dengan mudah dipahami oleh setiap pemula teknologi. Dia bersemangat menulis, mengembangkan perangkat lunak yang menarik, dan berkeliling dunia (melalui film dokumenter).

More From Kadeisha Kean