Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT Card with HTML and CSS

@bajwacodes

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Does flexbox only center the div vertically if you set a height to it?

In my case, it did center the div horizontally but not vertically until I set min-height: 100vh to the body. Please anyone explain, thank you!

Community feedback

@djbedford

Posted

Hey, yes you are correct in your thinking. The reason you need to set the height is because height is determined by the content, so when you try and center it vertically there is no room to adjust as it is already taking up it's full height. Now when you set the height to 100vh or something equivalent it has more room in order to palce the content centrally.

You can check out this article on MDN for a better explanation of how to align items https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container or I find CSS-TRICKS a good reference, here is their explanation for the align-items property https://css-tricks.com/almanac/properties/a/align-items/

Hope this helps.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord