Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR_code component, relative positioning

@AaronNevalinz

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • difficulty in centering the container harboring the QR-code image and the description

How do you best center a div in a div?

Community feedback

Vlad 240

@vladmee

Posted

Hi! Flexbox is great for this as already mentioned but I would like to give you an alternative, using grid:

display: grid;
place-items: center;

Grid feels more intuitive in this case as it's designed for arranging elements in a two-dimensional space, controlling layout both horizontally and vertically for complex structures.

Flexbox, on the other hand, is a one-dimensional model for aligning items in either a row or column. But it works if you think of the page as one big row where you position your item in the middle of the row, and align it vertically as well.Grid would be desired though!

1

@AaronNevalinz

Posted

@vladmee Sorry for the late reply. But all the same, thank you for that alternative. All my projects are based on Grid and flexbox.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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