在元素上边界中心的尾风CSS对齐文本

Question

我正在尝试使用 Tailwind CSS 来对齐另一个元素边框内的某些文本，以便元素周围的边框在该元素周围绘制一个周边，并与边框中心顶部的文本断开。

这是在 React 组件内完成的。

我对 Tailwind CSS 很陌生。事实上，我想要的目标太新了，来自以下 StackOverflow 问题，但是那里提供的解决方案似乎不起作用。

我尝试了以下操作：

• 将 mt-5 或 pd-5 添加到 h2 和 span 的类中> 我的标签的元素，试图添加边距以将标签向下移动到边框中，但这似乎不起作用。
• 将包含 span 元素的 h2 元素包装在 div 中，并应用 mt-5 或 pd- 5 ，但这也不起作用。
• 我还尝试通过 Chrome 开发工具编辑浏览器中的边距，但这没有帮助。

我的代码：

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: [],
}

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

我希望该文本，我想要的标签 与其下方的边框对齐。

我做错了什么？

Answer 1

我会绝对 ly将标签定位在相对 parent element中的标签中：

<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 并没有将标签向下移动，而是添加了一个负的 margin-bottom 类，在我的例子中 -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>
    );
}

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