QR code with HTML and CSS

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 3 years ago

  Hi ANKUR,

  Your div is not vertically centered because the margin property does not center the element but has the task of creating a margin between it and what is around it.

  I have a few suggestions for you:

  • To center the cards on the page try using Flexbox, it can help you better: give the flexbox and height properties to the body and remove all margin from the div. Read here -> Flex guide
  • Note: Flexbox aligns to the size of the parent container. You can use the vh measurement for the height... Viewport Height handles the sizing of an element in relation to the height of the browser window.
  • try use different measure for the card width, not %

  Hope this help :)

  1
• 

  Fayaz•380

  @fayax555Posted almost 3 years ago

  Give height: 100vh; display: grid; align-items: center to your body. To make the image fit the container, give your image max-width: 100%, then give some padding (for all sides) to your div.

  1