Skip to content
Submitted about 1 year ago

Solution using flex-box

Juan Galvez•50
@Galvez121
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Could anyone help me? I tried to center the div in the middle of the website using flex-box justify-content, but It did not work out. I did it using margin instead.

Any bad practice in HTML or CSS? Any changes that would make my code cleaner?

Thank you ^^

Community feedback

  • FFerDev•30
    @FFerDevPosted about 1 year ago

    Greetings ♥. The issue with trying to vertically center the component arises from not giving it a "defined" height. By default, the height will adjust to the height of its contents, meaning it will only occupy the necessary height, rendering the attempt to vertically center it futile. The solution would be to provide a height to the parent element of the element you want to center, for example, a min-height: 100vh. This way, it will have the space needed to be vertically centered.

    Marked as helpful
    1
    Juan Galvez•50
    @Galvez121Posted about 1 year ago

    @FFerDev Thank you so much! Something new that I learned.

    0
  • Rebecca Padgett•1,840
    @bccpadgePosted about 1 year ago

    Hello @Galvez121. Congratulations on completing this challenge!!!🎉

    To answer your question, you can use Flexbox or CSS Grid to center your component in the middle of the page.

    More info📚:

    You can add these styles on the <body> element. It doesn't matter which CSS Layout you choose the result is the same.

    Flexbox

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

    CSS Grid

    body{
 display: grid;
 place-content: center;
 min-height: 100vh;
}

    HTML 📃:

    • Every website should have at least one landmark so you can wrap your content using <main> tag.
    • When writing HTML, stick to class names because Ids are mainly used for JavaScript.

    Hope this helps you and have any other questions I would be glad to help you and just let me know✌🏼

    Marked as helpful
    1
    Juan Galvez•50
    @Galvez121Posted about 1 year ago

    Thank you @bccpadge. I will include the <main> in my following projects. Now, I know why I did not work the "justify-content: center;" and "align-items: center;" properties; I did not define the height!

    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