QR Code by basic of HTML and CSS

Community feedback

• 

  Ron Wollschläger•110

  @ron-wollschlaegerPosted about 1 year ago

  Hello Dhruv Sagar, good job on finishing this challenge. 💪

  Like @RodrigoHLC already told you, to center the .main div vertically, you can use the flexbox layout. You'll need to make a few adjustments to your CSS.

  Here's how you can do it:

  body {
      background-color: rgba(200, 222, 231, 0.89);
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh; /* Ensures the body covers the full viewport height */
  }
  

  With this, the body element is set to flex display, with both justify-content and align-items set to center the .main div both horizontally and vertically within the viewport.

  One more thing you can do is use <main></main> instead of <div class="main"></div>. You can find more on this one here → Semantic HTML5 Guide

  Great job on your project, and keep up the excellent work! 👍

  2
• 

  Rodrigo•480

  @RodrigoHLCPosted about 1 year ago

  In regards to centering the component vertically, I've never really understood why using "margin: auto" doesn't work, but you can at least do it by turning the body into a flex container and using its flex properties. You will need to give the body a height property for this to work though.

  1