0
267
ViewsTailwind CSS align text in center of border on element
I am trying to use Tailwind CSS to align some text within the border of another element, so that the border around my element draws a perimeter around the element, and has a break with the text in the center top of the border.
This is being done within a React component.
I am very new to Tailwind CSS. So new, in fact, that my desired goal comes from the following StackOverflow Question, but the solutions provided there do not appear to work.
I have tried the following:
- Adding
mt-5orpd-5to both the class for theh2andspanelements for my label, in an effort to add a margin to move the label down into the border, but this does not seem to work. - Wrapping the
h2element containing thespanelement in adivand applyingmt-5orpd-5to that, but that also did not work. - I've also tried editing the margin in-browser via the Chrome Development tools, but that did not help.
My Code:
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>
);
}
The leading-border-text TailwindCSS class is one that I have defined in my tailwind.config.js to simply add a custom line height of 0.1.
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {
lineHeight: {
'border-text': '0.1'
}
},
},
plugins: [],
}
This is what my code currently renders:
And I'd like for that text, My desired label to be in-line with the border just below it.
What am I doing wrong?
2 answers
Answer question0
I would absolutely position the label in a relative parent element like so:
<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>This way the label will always be centered on the top line of the relative parent element even if its size changes.
0
After some more thought, I came up with a solution to my own question.
For some reason that is not immediately clear to me, adding mt-5 did not move the label down but adding a negative margin-bottom class, in my case -mb-2, did. I would love it if someone could explain why this is the case.
My solution code:
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>
);
}
What my solution code renders:
