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 trialKen Alger
Treehouse TeacherCSS - 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
Treehouse TeacherSo, in looking at the page in IE v. 11 the image shows up correctly. Firefox seems to have an issue...
2 Answers
Ben Singer
8,621 PointsYou 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
8,621 Pointsif 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.
Ken Alger
Treehouse TeacherKen Alger
Treehouse TeacherMy 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.