將居中文字加入水平規則的中間
最初，問題提出了在xhtml 1.0 strict 中使用水平規則分隔文字的方法。然而，所提供的方法出現了對齊問題，促使人們尋求一個優雅的解決方案。
答案介紹了 Flexbox 作為解決此問題的關鍵。以下是所提供程式碼的細分：
- .separator { ... } 定義主元素的樣式。
- display: flex;將其設定為彈性容器。
- align-items: center;確保 Flexbox 內的項目垂直居中。
- text-align: center;將文字內容置中。
要建立水平線，請套用以下樣式：
- .separator::before, .separator::after { ... } 定位內容之前和之後的偽元素。
- content: '';從偽元素中移除任何內容。
- flex: 1;確保它們平等地佔據可用空間。
- border-bottom: 1pxsolid #000;建立所需的線條效果。
要在文字周圍加上間距，請套用下列樣式：
- .separator:not(:empty)::before { 。 .. } 和 .separator:not(:empty)::after { ... } 只有在有文字時才定位偽元素內容。
- margin-right 和 margin-left 在文字的左側和右側加上邊距，提供與水平線的分離。
HTML 程式碼示範如何使用此功能style:
將文字包裹在.separator 中
此解決方案利用Flexbox 的高級佈局功能輕鬆優雅地實現居中文字和水平規則。
以上是如何使用 Flexbox 將文字在水平線中居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
