Bagaimanakah Saya Boleh Memusatkan Teks Antara Peraturan Mendatar?

Memusatkan Teks Dalam Peraturan Mendatar

Untuk mencipta garisan mendatar yang mengapit teks berpusat, pelbagai penyelesaian telah dicadangkan, setiap satu dengan batasannya sendiri.

Satu pendekatan biasa melibatkan penggunaan berbilang <div> elemen dan mengapungkannya:

<div>

Walau bagaimanapun, pendekatan ini boleh menghasilkan isu penjajaran. Begitu juga, menggunakan jadual boleh mengakibatkan salah jajaran:

<table><tr>
  <td>

Penyelesaian yang lebih bersih muncul dengan pengenalan 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>

Pendekatan ini menyediakan penjajaran yang tepat dan menghapuskan keperluan untuk penanda kompleks atau penyelesaian "fudgy".

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