如何使用 Flexbox 在 HTML 中的水平规则中使文本居中？-css教程-PHP中文网

如何使用 Flexbox 在 HTML 中的水平规则中使文本居中？

Linda Hamilton

发布： 2024-12-06 21:31:14

原创

946 人浏览过

How Can I Center Text Within a Horizontal Rule in HTML Using Flexbox?

将居中文本添加到水平规则

在 HTML 中，在水平规则中添加居中文本的任务可能具有挑战性。人们提出了各种方法，但它们常常导致不一致或笨拙的解决方案。这是使用 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>

登录后复制

此代码创建一个带有居中文本的灵活容器。 ::before 和 ::after 伪元素形成水平边框，而 :empty 选择器可防止空容器上出现不必要的边距。该解决方案提供了清晰的对齐方式和轻松自定义分隔符样式。

以上是如何使用 Flexbox 在 HTML 中的水平规则中使文本居中？的详细内容。更多信息请关注PHP中文网其他相关文章！