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 trial

HTML Introduction to HTML and CSS (2016) Adding a New Web Page Linking It All Up

Enemuo Felix
Enemuo Felix
1,895 Points
Posted by Enemuo Felix
Enemuo Felix
1,895 Points

profile 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.
Alex G.
10,329 Points
Alex G.
Alex G.
10,329 Points

I 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.

Enemuo Felix
Enemuo Felix
1,895 Points
Enemuo Felix
Enemuo Felix
1,895 Points

Thank you christian and Alex for the quick responses

Enemuo Felix
Enemuo Felix
1,895 Points
Enemuo Felix
Enemuo Felix
1,895 Points

One more thing. Does the arrangement of the margin value really matter? i.e margin: 0 auto; or margin: auto 0;

Alex G.
Alex G.
10,329 Points
Alex G.
Alex G.
10,329 Points

Enemuo 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:

margin: 10px // is 10px top/bottom/left/right;
margin: 10px 5px // is 10px top/bottom and 5px left/right;
margin: 5px 10px 0px // is 5px top, 10px left/right and 0px bottom;
margin: 5px 10px 0px 8px // is 5px top, 10px right, 0px bottom and 8px left;
Christian Puga
Christian Puga
3,736 Points
Christian Puga
Christian Puga
3,736 Points

Hello , 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);
}