代码之家 › 专栏 › 技术社区 › I_A

将文本居中放在圆角边框中

vertical-alignment border line css html

I_A · 技术社区 · 4 年前

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

我试着修改发布在上的解决方案 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>

我怎样才能做到这一点?

0 回复 | 直到 4 年前

G-Cyrillus 4 年前

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

<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>

TRK 4 年前

如果你只想使用HTML和CSS,那么你可以这样做:

div {
  height: 60px;
  width: 200px;
  border: 2px solid black;
  border-radius: 10px;
}

h3 {
  width: 35px;
  margin-top: -10px;
  margin-left: 80px;
  background: white;
  padding:0px 2px;
}