如何使用 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中文网其他相关文章！