时间戳

首页 > 解决方案 > 圆角边框中的中心文本

html - 圆角边框中的中心文本

问题描述

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

在此处输入图像描述

我尝试更改在上一个问题上发布的解决方案，但我无法让文本的底部边框与下面的 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>

我怎样才能做到这一点？

标签： htmlcsslinebordervertical-alignment

解决方案

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

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

<div class="pt-3">
  <h2 class="w-full text-center" 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-t border-r border-l border-gray-600 rounded-md">
  </div>
</div>

推荐阅读