Had trouble trying to figure out how to center the qr component into the middle of the browser. Wanted to see people's solutions.
Pfigdev
@pfigzAll comments
- @Brandon-MatranSubmitted almost 2 years ago@pfigzPosted almost 2 years ago
To add to @rzceoffical's comment: In order to vertically center an element, the container must have a height value. Adding
height: 100vh;
to your body element will make the height equal to 100% of the view height. You can then center your element using either grid or flexbox.You also applied auto margin to your .qr-code class, which created a larger gap than in the design. I would personally add padding to the .container element in this case. Try different values to see what works.
You can also go to this link to see different ways to style your text (font): https://www.w3schools.com/css/css_font_size.asp. Try to incorporate some of these styles to get closer to the design template.
0