居中文本在圆形边框中

Question

我想创建一个圆形的边框，并在顶部边框的中间放置一些文本，如下所示：

我尝试更改this previous question上发布的解决方案，但是我无法使文本的底部边框与下面的div的边框匹配（下面的代码段使用tailwindcss，但您知道了）：

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>

<div class="pt-3">
  <h2 class="w-full text-center border-t rounded-t-lg border-gray-600" style="line-height: 0.1">
    <span class="bg-white px-3 text-sm font-medium">SOME TEXT</span>
  </h2>
  <div class="px-5 pb-5 pt-4 border-b border-r border-l border-gray-600 rounded-md">
  </div>
</div>

我该如何完成？

Answer 1

您的跨度已隐藏边框，将其保留在容器上，并将其从标题中删除。