Bagaimana untuk memusatkan div dalam 4

Memusatkan div telah lama menjadi meme dalam kalangan pembangun perisian, terutamanya pembangun bahagian belakang seperti saya, yang sering bergelut dengan teknologi bahagian hadapan, termasuk CSS.

Berita baiknya ialah perjuangan akhirnya berakhir, terima kasih kepada sifat CSS kandungan penjajaran baharu. Sudah tentu, harta ini mengendalikan penjajaran menegak sahaja. Lebih lanjut mengenainya kemudian.

Bagaimana ia dilakukan secara sejarah

Sebelum pengenalan align-content, kami biasanya perlu menggunakan CSS Grid atau Flexbox untuk mencapai penjajaran menegak.

Contoh grid:

<div style="display: grid; align-content: center; justify-content: center; height: 100vh;">
    Hello World!
</div>

Contoh Flexbox:

<div style="display: flex; flex-direction: row; align-items: center; justify-content: center; height: 100vh;">
    Hello World!
</div>

Sifat justify-content digunakan untuk penjajaran mendatar kandungan div dalam kedua-dua Grid dan Flexbox. Untuk div biasa, kita hanya boleh menggunakan penjajaran teks seperti berikut:

<div style="text-align: center; height: 100vh;">
    Hello World!
</div>

Bagaimana ia dilakukan pada tahun 2024

Dengan pengenalan align-content, tidak perlu lagi bergantung pada Grid dan Flexbox, yang setiap satunya mempunyai beberapa kelemahan. Kita boleh mencapai hasil yang sama dengan lebih bersih dengan perkara berikut:

<div style="align-content: center; height: 100vh;">
    Hello World!
</div>

Seperti yang dinyatakan sebelum ini, ini hanya mengendalikan penjajaran menegak. Untuk penjajaran mendatar, kami masih boleh menggunakan sifat penjajaran teks yang boleh dipercayai dalam kombinasi dengan kandungan penjajaran.

<div style="align-content: center; text-align: center; height: 100vh;">
    Hello World!
</div>

Sila ambil perhatian bahawa versi penyemak imbas minimum yang disokong ialah Chrome 123, Firefox 125 dan Safari 17.4

Sumber

• Dokumen Web MDN: align-content
• Bina Sendiri: Pusat Menegak CSS

Kredit imej pilihan

• Imej yang ditampilkan dijana oleh ChatGPT

Atas ialah kandungan terperinci Bagaimana untuk memusatkan div dalam 4. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!