Design comparison
Solution retrospective
Is it OK I dont know how to centralize a div vertically
Community feedback
- @Razha90Posted about 2 years ago
-
for auto center you can provide
display: flex;
on class.main-container . and addjustify-content: center;
. if you want the height to be auto centeralign-items: center;
-
don't give height to class.qr-code-holder just let it be auto and give it a padding .
-
give color
background-color: hsl(212, 45%, 89%);
pada body atau html .
Happy Codding ππππ
0 -
- @correlucasPosted about 2 years ago
πΎHello Karthik, congratulations for your solution!
I've done some changes to your code to fix the alignment, basically I added
min-height: 100vh
, removed the background from the container and add flex to the body. If you're not too familiar with flex I'll let you a link in the end of the comment with a better explanation. See the changes below:body { font-family: "Outfit", sans-serif; font-size: 15px; background-color: var(--Lightgray); display: flex; flex-direction: column; align-items: center; justify-content: center; height: calc(100vh - 1px); margin: 1.25rem; } .qr-code-holder { /* height: 70vh; */ background-color: hsl(0, 0%, 100%); border-radius: 10px; width: 300px; margin: auto; padding-top: 20px; }
Complete guide for flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
See if works for you!
0
Please log in to post a comment
Log in with GitHubJoin 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