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

Question

我正在尝试使用 Tailwind CSS 将一些文本对齐到另一个元素的边框内，这样我的元素周围的边框就会围绕该元素绘制一个周边，并与边框的中上部。

这是在 React 组件中完成的。

我对 Tailwind 还很陌生 CSS。太新了，事实上，我想要的目标来自 following Whosebug Question，但那里提供的解决方案似乎不起作用。

我尝试了以下方法：

为标签的 h2 和 span 元素的 class 添加 mt-5 或 pd-5，以增加边距将标签向下移动到边框中，但这似乎不起作用。
将包含 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

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

由于某些我不是很清楚的原因，添加 mt-5 并没有将标签向下移动，而是添加了负值 margin-bottom 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>
    );
}

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

Answer 2

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />


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

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

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

Tailwind CSS align text in center of border on element

javascript

reactjs

tailwind-css