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

CSS How to Make a Website Adding Pages to a Website Style New Pages

Danielle Teychenne
Danielle Teychenne
3,793 Points

Centering profile photo

I can't seem to center my profile photo. I have recreated the CSS correctly. When I used

display: block;

the profile image would disappear. When I used

display: inline-block;

the profile image appears with curved edges but it won't center.

3 Answers

Try this block of code see if it works. Try to understand what's going on with the code. Hope it helps!

.profile-photo {
max-width: 150px;
margin: 0px auto 30px;
border-radius: 100%;
text-align: center;
display: block;
clear: both;
}
Danielle Teychenne
Danielle Teychenne
3,793 Points

Worked perfectly! So I'm trying to understand how this all works.... The browser displays an image by default as inline with the text. We change that to a block display so that it has a definable width and height. So the clear: both clears any elements floated left or right which in this case was the photo floating left? Wait, why would it float left if I didn't tell it to?

Danielle Teychenne
Danielle Teychenne
3,793 Points

Worked perfectly! So I'm trying to understand how this all works.... The browser displays an image by default as inline with the text. We change that to a block display so that it has a definable width and height. So the clear: both clears any elements floated left or right which in this case was the photo floating left? Wait, why would it float left if I didn't tell it to?

It looks like the float step may not have been in the lesson you were on.

Hi Danielle,

The header is what was floated. So by having the image clear the float it means that the browser has to drop the image below all previous floated elements. This makes it drop below the header.

The fix that Dustin posted is in the Teacher's Notes section for that video. However, this fix was specific to that problem.

For a general more appropriate fix you should clear the floated header in your wrapper element since that is the first element that comes after your header. This will insure the content box for the wrapper will drop below the header.

Add to your existing #wrapper rule:

#wrapper {
    clear:both;
}

Then you won't have to do this fix for the profile photo. You can remove clear: both from .profile-photo

Danielle Teychenne
Danielle Teychenne
3,793 Points

Thanks for everyones helpful comments, I can't believe I missed the teacher's notes section. I will definitely keep my eye out for any more corrections.

Kofi Opoku
Kofi Opoku
7,432 Points

Try :

.profile {
margin: 0 auto;
width: 150px; 
}

The width can be whatever value you choose;