Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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

Thank you christian and Alex for the quick responses

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

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

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