如何使用 Flexbox 將文字在水平線中居中？

將居中文字加入水平規則的中間

最初，問題提出了在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中文網其他相關文章！