QR code component using HTML and CSS

Hi @underworl, nice work!

I found the use of the flex display property helpful in my version of this project, thanks to feedback I received. It made it so much easier to center the items within the body, but also center the items within the 'card' itself.

You could get rid of the divs within .container and leave just the three elements (img, p, p) within one div themselves. Arranging them with flex within that will then be easier. I was able to eliminate a lot of margin properties and such from my CSS when I did this.

Your first <p> should probably be a heading like <h1> too, I think that will eliminate one of your errors in the accessibility report, but with that you could also simplify more and eliminate the classes from all three and just target them with the selectors since there would be only one of each type.

I tend to work on the same before I work positioning as well. It seems to work well for me too but curious to see what others might input on that.

👾Hello Renardo, congratulations for your solution!

Answering your question:

To align it vertically, in my opinion, the best way is by using flexbox. To do that you need to add min-height: 100vh (this will make the container align to the parent element, in this case the body) because the body will display 100% of the view port height so will be centered vertically, but you need to add too display: flex and its flex alignments. See the code fixes below where I've removed the margins and added the flexbox:

body {
    min-height: 100vh;
    background-color: hsl(212, 45%, 89%);
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container {
    /* height: 100%; */
    width: 350px;
    background-color: hsl(0, 0%, 100%);
    /* margin: 150px auto; */
    border-radius: 20px;
    text-align: center;
}

If you do this game tutorial, you'll learn a lot about flexbox and alignment: https://flexboxfroggy.com/

See if works for you bro!