Bagaimanakah Saya Boleh Memusatkan Teks Dalam Peraturan Mendatar dalam HTML Menggunakan Flexbox?

Menambah Teks Berpusat pada Peraturan Mendatar

Tugas menambah teks berpusat dalam peraturan mendatar boleh mencabar dalam HTML. Pelbagai pendekatan telah dicadangkan, tetapi ia sering mengakibatkan salah jajaran atau penyelesaian yang kekok. Berikut ialah penyelesaian yang elegan menggunakan Flexbox:

.separator {
  display: flex;
  align-items: center;
  text-align: center;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}

<div class="separator">Next section</div>

Kod ini mencipta bekas fleksibel dengan teks berpusat. Elemen ::sebelum dan ::selepas membentuk sempadan mendatar, manakala pemilih :kosong menghalang jidar yang tidak perlu pada bekas kosong. Penyelesaian ini menyediakan penjajaran bersih dan penyesuaian mudah bagi gaya pemisah.

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