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

Question

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

这是在 React 组件中完成的。

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

我尝试了以下方法：

• 将mt-5或pd-5添加到h2的 class 和我的 label 的span元素，以努力增加边距以将 label 向下移动到边界，但这似乎不起作用。
• 将包含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 class 是我在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父元素中使用 position label，如下所示：

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

这样 label 将始终居中于相关父元素的顶行，即使其大小发生变化也是如此。

Answer 2

经过深思熟虑，我想出了一个解决我自己问题的方法。

出于某种我不是很清楚的原因，添加mt-5并没有将 label 向下移动，但是添加负边距底部 class，在我的例子中-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>
    );
}

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