Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialEnemuo Felix
1,895 Pointsprofile image
How did Treasure center align the .profile-image. I will also like to know which line of CSS rule she used? I have gone through the CSS folder but couldn't identify it
2 Answers
Alex G.
10,329 PointsI commonly center elements by setting the margin sides to auto... i.e.
margin: 0 auto;
This sets the top/bottom to 0, but sets both sides to equal and is relative to the browser window.
Christian Puga
3,736 PointsHello , this are the ones she used for the profile image
header .profile-image {
margin-top: 50px;
width: 150px;
height: 150px;
border-radius: 50%;
border: 3px solid white;
transition: all .5s;
}
header .profile-image:hover {
transform: scale(1.2) rotate(360deg);
}
Enemuo Felix
1,895 PointsEnemuo Felix
1,895 PointsThank you christian and Alex for the quick responses
Enemuo Felix
1,895 PointsEnemuo Felix
1,895 PointsOne more thing. Does the arrangement of the margin value really matter? i.e margin: 0 auto; or margin: auto 0;
Alex G.
10,329 PointsAlex G.
10,329 PointsEnemuo Felix yes arrangement matters with CSS. You can enter 4 values, and the number of values you enter determines which side(s) get that margin value. One value is the same value for all 4 sides. Two values is the same for top/bottom and left/right. 3 values is top, left/right, bottom. And 4 values is top, right, bottom, left: