Skip to content
Submitted over 1 year ago

NFT Project

casablancass•40
@casablancass
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 still have trouble centering the main content vertically on the page

Is it really necessary to create a <div> and then put an <img> inside?

Community feedback

  • Ecem Gokdogan•9,380
    @ecemgoPosted over 1 year ago

    Some recommendations regarding your code that could be of interest to you.

    • If you want to center it correctly, you can add align-items and min-height to the body
    body {
   align-items: center;
   min-height: 100vh;
}
    • after adding it, you don't need to use margin-top in the main:
    main {
    /* margin-top: 80px; */
    background-color: #15273F;
    border-radius: 15px;
    height: 595px;
    width: 350px;
    padding: 25px;
}

    Hope I am helpful. :)

    Marked as helpful
    0
  • Yassine Afaila•540
    @YassineafailaPosted over 1 year ago

    Hi, if you want to center the content you could use this: display:flex; align-items:center; justify-content:center; height:100vh; flex direction:column;

    0

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