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

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Posted by Ken Alger
Ken Alger
Treehouse Teacher

CSS - display: block;

In the .profile-photo class in Page: About, when I add the "display: block;" portion of the css code, the image disappears from the browser. If that line get commented out the image appears, but not centered.

Suggestions?

Ken Alger
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

My CSS code is:

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

With the "display: block;" line of code I get no image. If I comment out that line, or delete it, the image returns but isn't centered obviously.

Thanks in advance for everyone's assistance.

Ken Alger
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

So, in looking at the page in IE v. 11 the image shows up correctly. Firefox seems to have an issue...

2 Answers

Ben Singer
Ben Singer
8,621 Points

You need to specify a width property before the max-width property otherwise the browser doesn't know what size you're intending your element to be to begin with.

Personally, I'd go with something like this:

{ display: block; width: 150px; max-width: 100%; height:auto; margin: 0 auto 30px; border-radius: 100%; }

Also, if you're trying to make a circular image, border-radius: 50% should be enough.

Ben Singer
Ben Singer
8,621 Points
Ben Singer
Ben Singer
8,621 Points

if you want to center an image using display:block you need a few other styles to get it working correctly:

.centered { display:block; margin:0 auto; height:auto; }

height: auto isn't necessary in every browser but in ie9 there are weird scaling issues if you don't include it.