6 Trik CSS untuk Sejajar Kandungan secara menegak

Mari kita bercakap mengenai penjajaran menegak dalam CSS, atau untuk menjadi lebih tepat bagaimana ia tidak boleh dilakukan. CSS belum menyediakan cara rasmi untuk memusatkan kandungan secara menegak di dalam bekasnya. Ini masalah yang mungkin telah membuat pengembang web frustrasi di mana-mana. Tetapi jangan takut, dalam jawatan ini, kami akan menjalankan beberapa helah yang boleh membantu anda meniru kesannya.

Walau bagaimanapun, helah ini mempunyai batasan, dan anda mungkin perlu gunakan lebih daripada satu helah untuk menyelesaikan ilusi. Sekiranya anda mengetahui sebarang helah lain, beritahu kami di dalam komen.

1. Gunakan Kedudukan Mutlak

Trik pertama yang akan kita lihat di sini menggunakannya kedudukan harta. Anda mempunyai dua

, satu ialah bekas, yang lain, elemen kanak-kanak yang mengandungi kandungannya.

Kami akan terlebih dahulu menetapkan kedudukan elemen kontena kepada relatif, maka kami menetapkan kedudukan elemen kanak-kanak mutlak. Ini membolehkan kami untuk meletakkannya secara melintasi bekas.

Untuk menyelaraskannya secara menegak, gerakkan kedudukan unsur kanak-kanak dari bahagian atas, dengan separuh ketinggian bekas, dan tariknya separuh dari lebar elemen kanak-kanak. Inilah output:

Silap mata ini adalah sempurna apabila terdapat hanya satu elemen kanak-kanak, jika tidak mutlak kedudukan akan mempengaruhi elemen lain dalam bekas yang sama.

2. Gunakan Transformasi CSS3

Transformasi CSS3 telah menjadikannya mudah untuk meletakkan kandungan di pusat. Transform CSS3, tidak seperti kedudukan harta, tidak akan menjejaskan kedudukan elemen lain dalam bekas yang sama.

Dengan mengandaikan bahawa kita mempunyai struktur HTML yang sama seperti kaedah sebelumnya - satu induk, satu elemen kanak-kanak - 50% dari atas dan menggunakan transform CSS memberikan terjemahan -50%. Dan di sana anda memilikinya.

Perlu diingat walaupun CSS3 Transforms tidak akan berfungsi di Internet Explorer 8 dan di bawah. Anda mungkin mahu menggunakan mana-mana kaedah lain di sini sebagai sandaran.

3. Gunakan Padding

Kita juga boleh menggunakannya padding untuk mencipta ilusi penjajaran menegak. Untuk berbuat demikian, letakkan bahagian atas dan bawah padding sama, seperti berikut:

Silap mata ini sesuai untuk apabila anda tidak menetapkan bekas dalam lebar tetap, hanya tetapkan lebarnya auto.

4. Gunakan Ketinggian Talian

Jika anda hanya mempunyai satu baris kandungan teks dalam satu bekas, anda boleh menyelaraskan teks secara menegak menggunakan ketinggian baris harta. Menetapkan ketinggian baris nilai kira-kira sama dengan ketinggian bekas, dan anda akan melihat output berikut.

Ingatlah bahawa helah ini hanya berfungsi dengan satu baris teks. Sekiranya kandungan memecah dua atau lebih garisan, ruang antara setiap baris adalah seperti yang kami nyatakan di dalam ketinggian baris, memberi kita ruang kosong terlalu banyak.

5. Gunakan Jadual CSS

Secara peribadi, menggunakan Jadual CSS ialah helah kegemaran saya untuk menggunakan penjajaran menegak. Ia berfungsi dalam pelayar lama seperti Internet Explorer 8. Kaedah ini dilakukan dengan menetapkan paparan unsur kontena kepada jadual, manakala elemen kanak-kanak akan dipaparkan sebagai sel-sel kemudian gunakan menegak harta untuk menentusahkan teks secara menegak.

6. Gunakan Flexbox

Kaedah terakhir untuk menegak menegak adalah dengan menggunakan Flexbox. Flexbox adalah modul baru dalam CSS3. Ia menawarkan kaedah yang lebih mudah untuk menyelaraskan kandungan. Untuk memusatkan kandungan secara menegak dalam kotak flex, tambah sahaja align-items: center; seperti berikut, dan itu sahaja.

Perlu diingat bahawa beberapa pelayar Flexbox hanya menyokong ciri separa modul Flexbox seperti Internet Explorer 10, Safari, 6, dan Chrome 27 dan ke bawah. Oleh itu, serupa dengan silap mata dengan CSS3 Transform, pastikan kesan itu jatuh dengan baik dalam pelayar ini.