6 Trik CSS untuk Menyelaraskan Konten Secara Vertikal

Mari kita bicara tentang penyelarasan vertikal dalam CSS, atau lebih tepatnya bagaimana itu tidak bisa dilakukan. CSS belum menyediakan cara resmi untuk memusatkan konten secara vertikal di dalam wadahnya. Ini masalah yang mungkin membuat pengembang web frustrasi di mana-mana. Tapi jangan takut, dalam posting ini, kami akan menjalankan beberapa trik yang dapat membantu Anda meniru efeknya.

Namun trik ini mungkin memiliki keterbatasan, dan Anda mungkin harus melakukannya gunakan lebih dari satu trik untuk menyelesaikan ilusi. Jika Anda tahu ada trik lain, beri tahu kami di komentar.

1. Gunakan Posisi Absolut

Trik pertama yang akan kita lihat di sini menggunakan posisi milik. Anda punya dua

, satu adalah wadah, yang lain, elemen anak yang berisi konten.

Pertama-tama kita akan mengatur posisi elemen kontainer ke relatif, kemudian kita mengatur posisi elemen anak ke mutlak. Ini memungkinkan kita untuk secara bebas meletakkannya di wadah.

Untuk menyelaraskannya secara vertikal, pindahkan posisi elemen anak dari atas, setengah tinggi wadah, dan tarik setengah dari lebar elemen anak. Berikut hasilnya:

Trik ini sangat cocok ketika hanya ada satu elemen anak, jika tidak mutlak Posisi akan mempengaruhi elemen lain dalam wadah yang sama.

2. Gunakan CSS3 Transform

Transformasi CSS3 telah membuatnya mudah untuk menempatkan konten di tengah. CSS3 Transform, tidak seperti posisi properti, tidak akan mempengaruhi posisi elemen lain dalam wadah yang sama.

Dengan asumsi kita memiliki struktur HTML yang sama dengan metode sebelumnya - satu orangtua, satu elemen anak - 50% dari atas dan menggunakan transformasi CSS memberikan terjemahan -50%. Dan begitulah.

Perlu diingat bahwa Transformasi CSS3 tidak akan berfungsi di Internet Explorer 8 dan di bawahnya. Anda mungkin ingin menggunakan salah satu metode lain di sini sebagai mundur.

3. Gunakan Padding

Kita juga bisa menggunakan lapisan untuk membuat ilusi penyelarasan vertikal. Untuk melakukannya, cukup setel padding atas dan bawah secara merata, sebagai berikut:

Trik ini cocok untuk saat Anda tidak mengatur wadah dalam lebar tetap, cukup atur lebar mobil.

4. Gunakan Tinggi Baris

Jika Anda hanya memiliki satu baris konten teks dalam sebuah wadah, Anda dapat menyelaraskan teks secara vertikal menggunakan tinggi garis milik. Mengatur tinggi garis nilai untuk hampir sama dengan tinggi kontainer, dan Anda akan melihat output berikut.

Ingatlah bahwa trik ini hanya berfungsi dengan satu baris teks. Jika konten terpecah menjadi dua baris atau lebih, ruang antara setiap baris akan seperti yang kami tentukan di tinggi garis, memberi kita terlalu banyak ruang putih.

5. Gunakan Tabel CSS

Secara pribadi, menggunakan Tabel CSS adalah trik favorit saya untuk menerapkan perataan vertikal. Ini bekerja di browser lama seperti Internet Explorer 8. Metode ini dilakukan dengan mengatur tampilan elemen kontainer meja, sedangkan elemen anak akan ditampilkan sebagai sel tabel lalu gunakan perataan vertikal properti ke pusat teks secara vertikal.

6. Gunakan Flexbox

Metode terakhir untuk pemusatan vertikal adalah dengan menggunakan Flexbox. Flexbox adalah modul baru di CSS3. Ini menawarkan metode yang lebih mudah untuk menyelaraskan konten. Untuk memusatkan konten secara vertikal dalam kotak fleksibel, cukup tambahkan menyelaraskan item: pusat; sebagai berikut, dan hanya itu.

Ingatlah bahwa Flexbox beberapa browser hanya mendukung fitur parsial dari modul Flexbox seperti Internet Explorer 10, Safari, 6, dan Chrome 27 dan yang lebih baru. Karenanya, mirip dengan trik dengan CSS3 Transform, pastikan efeknya jatuh dengan baik di browser ini.