Submitted over 3 years ago
Use of Flexbox, negative margins and relative absolute positionings.
@srijan-srijan
Design comparison
SolutionDesign
Solution retrospective
I pretty much enjoyed coding this design.
However, when placing the center image, I opted to use negative margins.
Is there a standard way to achieve such scenarios that I am unaware of?
Community feedback
- @SasaVaticPosted over 3 years ago
You can set parent div of img to be position: relative and img to be position: absolute then use property left: 50%; on img. It will add gap between parent div left edge and picture left edge exactly 50% of parent div width. Now to finally center img horizontally use transform: translateX(-50%) to move picture to left for half it's width. To position img vertically simply use top: property on img element;
0
Please log in to post a comment
Log in with GitHub
Join 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