Bagaimanakah Saya Boleh Memusatkan Teks Dalam Peraturan Mendatar Menggunakan Flexbox?

Tambahkan Teks Berpusat pada Tengah Peraturan Mendatar

Pada asalnya, soalan itu mengemukakan cara untuk memisahkan teks menggunakan peraturan mendatar dalam xhtml 1.0 ketat . Walau bagaimanapun, kaedah yang disediakan mempamerkan isu penjajaran, mendorong permintaan untuk penyelesaian yang elegan.

Jawapannya memperkenalkan Flexbox sebagai kunci untuk menyelesaikan masalah ini. Berikut ialah pecahan kod yang disediakan:

• .pemisah { ... } mentakrifkan gaya untuk elemen utama.
• paparan: flex; menetapkannya sebagai bekas fleksibel.
• item sejajar: tengah; memastikan item dalam kotak flex dipusatkan secara menegak.
• text-align: center; memusatkan kandungan teks.

Untuk mencipta peraturan mendatar, gaya berikut digunakan:

• .separator::before, .separator::after { ... } menyasarkan unsur pseudo sebelum dan selepas kandungan.
• kandungan: ''; mengalih keluar sebarang kandungan daripada unsur pseudo.
• flex: 1; memastikan mereka menduduki ruang yang tersedia secara sama rata.
• bahagian bawah sempadan: 1px pepejal #000; mencipta kesan garisan yang diingini.

Untuk menambah jarak di sekeliling teks, gaya berikut digunakan:

• .separator:not(:empty)::before { . .. } dan .separator:not(:empty)::after { ... } sasarkan unsur-unsur pseudo hanya apabila terdapat teks kandungan.
• margin-kanan dan jidar-kiri menambah jidar ke kiri dan kanan teks, memberikan pemisahan daripada peraturan mendatar.

Kod HTML menunjukkan cara menggunakan ini gaya:

• membalut teks dalam .separator elemen.

  Penyelesaian ini menggunakan keupayaan susun atur lanjutan Flexbox untuk mencapai teks berpusat dan peraturan mendatar dengan mudah dan elegan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan Teks Dalam Peraturan Mendatar Menggunakan Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!