Design comparison
Community feedback
- @ZPolikarpovPosted 9 months ago
Hey, I've noticed you use margins to get your objects in the right position. This can get very tiring and messy, especially when working on bigger projects and projects that might change their requirements later.
For example instead of using
.photo img { //... margin-left: 100px; margin-top: 25px; }
you could use
.photo { //... display: flex; justify-content: center; }
This will horizontally center your image (and all other content) inside of the div.
Alternatively there is also a way to center objects by assigning automatical margins like:
.photo img { //... margin-inline: auto; }
This will horizontally center your image by creating margins that fill out the space to the left and the right of it.
PS: I noticed you tried to use
align-items: center;
on your.photo
class. This property doesn't work, because yourdiv
is displayed as a blockdisplay: block;
. You can enable it by making yourdiv
either a flexboxdisplay: flex;
or a griddisplay: grid;
Happy coding!
Marked as helpful0
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