Skip to content
Submitted almost 3 years ago

NFT preview card solution using Flexbox

Noel Royβ€’10
@noelroy
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

What is the best way to centre a div in a page ?

Community feedback

  • Coder Sureshβ€’870
    @coderSureshPosted almost 3 years ago

    To center a div, you can use flexbox. For example, you have a div with a class name container that contains everything inside a body tag. In order to center that div, you can use flexbox as:

    body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
}

    In this code, we are giving a height of 100 vh (viewport height) which covers the full height of the screen. "align-items: center" centers the div vertically, and "justify-content: center" centers the div horizontally.

    I saw that we have a section with a class name container. To center that container, instead of giving it a margin of 10vh, you can use flexbox as shown above.

    Let me know if this helped you. If it didn't I am always here for you. Thanks for reading.

    Marked as helpful
    0
  • Anosha Ahmedβ€’9,300
    @anoshaahmedPosted almost 3 years ago

    Hey good job on the challenge! In the future, to avoid accessibility issues, include at least one <h1> in your code. Instead of wrap everything in your body in <section>, wrap it in <main>.

    To answer your question, I would say give your <body> a min-height=100vh and use flexbox.

    Marked as helpful
    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