Design comparison
Solution retrospective
While building this project I ran into 2 issues: First one was centering the card on the page, I tried using:
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
But this didn't center the card vertically, I ended up using:
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
This worked, but I'm wondering why display:flex;
didn't work (I tried adding it to the body, main and .container)
2nd issue was positioning the profile pic correctly and adding a border. I ended up creating a <div> container for the image. Is that a valid way?
Thanks so much!
Community feedback
- @branalex94Posted over 2 years ago
Hey there! Nice solution. Just passing by to give my -hopefully helpful- advice. You could actually use display: grid; place-content: center; on the container, which in this case is the body itself. It will center whatever content it has to the center. Also may be useful to check on CSS grids, it could be useful to you in the future. Happy coding!
Marked as helpful0@ttaammaarrPosted over 2 years ago@branalex94 Hi Brandon,
Definitely helpful, thank you so much! I will be looking into it, is it also possible to center content vertically using this method?
Anyways, thanks for your feedback, I'll dive into CSS grids soon :)
-Tamar
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