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
b1mind
b1mind2y ago
So you want Just Text to be full height of its parent? Cause it is right now but you have padding on the parent
lko
lko2y ago
I want it to be the same height as the search bar but without setting it manually
b1mind
b1mind2y ago
what you are doing works fine then
lko
lko2y ago
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
b1mind
b1mind2y ago
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
lko
lko2y ago
Thanks @b1mind
Want results from more Discord servers?
Add your server