使用 Tailwind CSS 创建包含文本的水平线 (HR) 分隔线

Question

我想<hr>使用 Tailwind CSS 创建一个分隔线，但我想在中间添加一些文本，而不是跨越整个页面宽度的水平线。

例如：

----------------------------------- Continue -----------------------------

我在文档中找不到类似的内容。我怎样才能达到这个效果？

如有必要，我可以将 HTML 更改为元素以外的内容<hr>。这只是我知道如何创建水平线的唯一方法。

Answer 1

您可以使用此 HTML 语法来创建您想要的内容：

<div class="relative flex py-5 items-center">
    <div class="flex-grow border-t border-gray-400"></div>
    <span class="flex-shrink mx-4 text-gray-400">Content</span>
    <div class="flex-grow border-t border-gray-400"></div>
</div>

在这里查看结果：https://play.tai​​lwindcss.com/65JULZ5XES

Answer 2

您可以使用 Tailwind CSS 创建一个包含三个项目的 Flex 容器来实现此效果：两个分隔线和一个文本元素。您可以使用 border 实用程序创建水平线，并使用 flex 实用程序来对齐项目。

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex items-center">
  <div class="flex-1 border-t-2 border-gray-200"></div>
  <span class="px-3 text-gray-500 bg-white">Continue</span>
  <div class="flex-1 border-t-2 border-gray-200"></div>
</div>

在此代码中：

• flex使容器成为弹性容器。
• items-center将项目垂直居中对齐。
• flex-1使分隔物占据容器中的剩余空间。
• border-t-2 border-gray-200创建一条 2 像素厚的灰色水平线。
• px-3向文本添加水平填充。
• text-gray-500设置文本颜色。
• bg-white将文本的背景颜色设置为白色，这会产生文本中断线条的效果。

例子

https://play.tai​​lwindcss.com/FsC5mfR729