顺风CSS在元素的边框中心对齐文本

Question

我正在尝试使用Tailwind CSS对齐另一个元素的边框内的一些文本，这样我的元素周围的边框就会在元素周围绘制一个周界，并且在边框的中央顶部有一个与文本之间的中断。

这是在一个反应组件内进行的。

我是非常新的尾风CSS。事实上，我所期望的目标来自于following StackOverflow Question，但在那里提供的解决方案似乎不起作用。

我尝试了以下几点：

• 将mt-5或pd-5添加到标签的h2元素和span元素的类中，以努力添加空白以将标签移动到边框中，但这似乎不起作用。在d11中包装包含span元素的h2元素的
• ，并将mt-5或D13应用于此，但也不起作用。H 214H 115我也尝试通过Chrome开发工具在浏览器中编辑页边距，但没有帮助。H 216

我的守则：

export default function Skills() {
    return (
        <section id="skills">
            <div className="container px-5 py-10 mx-auto">
                <div className="pt-3">
                    <h2 className="w-full text-center leading-border-text mt-5">
                        <span className="text-sm font-medium">My desired label</span>
                    </h2>
                    <div className="flex flex-wrap px-5 pb-5 pt-4 border-b border-t border-r border-l border-gray-600 rounded-md">
                        Some content here.
                    </div>
                </div>
            </div>
        </section>
    );
}

leading-border-text TailwindCSS类是我在tailwind.config.js中定义的一个类，它只需添加一个自定义行高度0.1。

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      lineHeight: {
        'border-text': '0.1'
      }
    },
  },
  plugins: [],
}

这就是我的代码当前呈现的内容：

​

​

我想要这段文字，My desired label和它下面的边框保持一致.

我做错了什么？

Answer 1

我将absolute将标签放在relative父元素中，如下所示：

​

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


<div class="bg-gray-700 min-h-screen text-gray-400">

  <!-- Skills() -->
  <div class="container mx-auto px-5 py-10">
    <div class="relative rounded-md border border-gray-600">
      <p class="p-3">Some content here.</p>
      <h2 class="absolute flex top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
        <span class="bg-gray-700 px-2 text-sm font-medium">My desired label</span>
      </h2>
    </div>
  </div>
  <!-- Skills() -->

</div>

​

这样，标签将始终以相对父元素的顶部行为中心，即使其大小发生了变化。

Answer 2

经过进一步的思考，我想出了一个解决我自己问题的办法。

由于某些原因，我还不清楚，添加mt-5并没有将标签向下移动，但是添加了一个负值底端类，在我的例子中是-mb-2。如果有人能解释一下为什么会这样，我会很高兴的。

我的解决方案代码：

export default function Skills() {
    return (
        <section id="skills">
            <div className="container px-5 py-10 mx-auto">
                <div className="pt-3">
                    <h2 className="w-full text-center leading-border-text -mb-2 pr-2 pl-2">
                        <span className="bg-gray-900 text-sm font-medium">My desired label</span>
                    </h2>
                    <div className="flex flex-wrap px-5 pb-5 pt-4 border-b border-t border-r border-l border-gray-600 rounded-md">
                        Some content here.
                    </div>
                </div>
            </div>
        </section>
    );
}

我的解决方案代码呈现的内容：

​

​