Skip to content
Submitted over 2 years ago

NFT Card Component

Aditya•150
@adityayadav71
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I had difficulties aligning the images and texts horizontally with display property set to inline-block, I found that using "parent-container" > * { verticle-align: middle}, it worked. I don't know about the ">" symbol, could anyone explain this ?

Community feedback

  • Md Raihan Alam•520
    @Md-Raihan-AlamPosted over 2 years ago

    "parent-container" > * here by ">" means that select all child element in parent-container. It is a way to tell CSS that * will be the child element in parent-container. You can center items by using flex or grid or transform. but make sure to give "body" tag height:100vh or it will not work. You can check this blog https://blog.hubspot.com/website/center-div-css#:~:text=You%20can%20do%20this%20by,the%20div)%20vertically%20and%20horizontally.

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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