Better method to make flex children full height and text centered?
So, this is my code https://play.tailwindcss.com/VhJeG1iMb3. It's tailwind, the classes represent the style that is being applied (if you hover over the class you can see it).
What I want to do is make the div full height and with the text centered, I achieved it but I had to make it self-stretched and a flexbox and then align the items in center. I was wondering if there was a better method to do it.
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
6 Replies
So you want Just Text to be full height of its parent? Cause it is right now but you have padding on the parent
I want it to be the same height as the search bar but without setting it manually
what you are doing works fine then
I know it works fine but it just seems weird to me that I have to stretch it, create a flexbox and then align the items just to do that. But if that's the only way, it's fine, i just wanted to know if there was a simpler way
height will never stretch on flex child elements unless you tell it
its not like width: auto on defaults
Grid children will by default though
Thanks @b1mind