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

Posted by Kaspar Paur
Kaspar Paur
753 Points

Profile photo: display:block; makes photo disappear and auto within the margin property doesn't work

.profile-photo { display:block; max-width:150px; margin: 0 auto 30px; border-radius:25%; }

When adding this in CSS, my profile-photo disappears. The reason is the 'display:block;' command. Additionally, if I leave the display:block away, the photo doesn't center as it should using the margin: auto command.

Can smb help me here?

Kaspar Paur
Kaspar Paur
753 Points

Correction: Photo doesn't disappear but gets pushed to the top right!

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Kaspar,

This particular problem seems to be specific to firefox. Is that what you're using? The Teacher's Notes below this video has a fix for it.

The problem is related to the floated header never being cleared.

I would recommend that you clear the floated header in your wrapper div. This will fix this specific firefox problem but also more general problems that happen in other browsers too.

#wrapper {
  clear: both; /* Add this */
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}
Kaspar Paur
Kaspar Paur
753 Points

Hi Jason

You're right - Firefox. Thanks for the answer - solved the problem!

Andreas cormack
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Andreas cormack
Python Web Development Techdegree Graduate 33,011 Points
Andreas cormack
.a{fill-rule:evenodd;}techdegree seal-36
Andreas cormack
Python Web Development Techdegree Graduate 33,011 Points

if your trying to center the image using margin not sure why you have a 30px after auto. try this see if it works .profile-photo{display:block;max-width:150px;margin:0 auto;border-radius:25%;}

Kaspar Paur
Kaspar Paur
753 Points

Thanks for the answer:

The I want to center it on the horizontal axis - the 30px at the end is a margin under the pic that should be there!

Tried the link - unfortunately same result...

Tiffany McAllister
Tiffany McAllister
25,806 Points
Tiffany McAllister
Tiffany McAllister
25,806 Points

Your code works for me..

If you leave out the "display: block" the image won't center using "margin: auto" as it is an inline element.

Kaspar Paur
Kaspar Paur
753 Points

Thanks for the answer.

I see - makes sense! But still don't understand why the "display: block" moves the pic to the top-right corner.

Cheers