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!

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

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

Michael Lee
Michael Lee
11,797 Points

Problem centering display: inline-block

Hi, I'm using Firefox and I'm using the work around of display: inline-block; to get around the issue of the disappearing image when using display: block; in Firefox. However a 2nd issue is now occurring and it's completely puzzling me.


As you can see the image is not being centered and seems to be ignoring the margin syntax.

The css code is listed below. It takes in everything but the margin.

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

Please note, I get that the problem might be isolated to Firefox but as far as I know I need to be equipped to deal with these problems if I'm to keep a job in web development or at least find an alternative route that doesn't involve changing the display property.

I suppose turning off line wrapping on the line of the image could be one and keeping the display to the default. I thought I'd poke around and see if someone could tell me why the margin property was being ignored.

4 Answers

Hi Michael,

I see that you must have looked at the teacher's notes and cleared the float in .profile-photo

The image didn't actually disappear. If you take out the clear you should have a horizontal scrollbar and if you scroll to the right you should see your image stuck at the right side of the header. It'll be in the top right corner of your page. This has to do with the floated header not being cleared.

Clearing the float in the profile image was the solution reached in an earlier post about this same issue.

A new problem has come up recently where people were getting gaps above their header. If the first element that you put in your section has a top margin then it will appear as a gap above the header. Try adding a short paragraph as the very first thing in your section element to see what I mean.

This is related to not clearing that float.

I recommend now that the float be cleared in the wrapper element since that's the first element after the header.

Add clear: both to your existing wrapper rule:

#wrapper {

If you do this then you don't have to clear the float in your .profile-photo.

To answer your question about margin auto -

Margin auto only works on block level elements. It doesn't work on inline or inline-block elements. To center those elements you can use text-align: center on the parent element.

Gabby Banowsky
Gabby Banowsky
1,804 Points

Thanks so much Jason! Was having the exact same issue and it was driving me nuts!

Hi Brian,

The profile photo problem seems to be a firefox only issue and maybe some versions of IE. So it's possibly a bug in those browsers. Unless they're doing it right and chrome is getting it wrong.

The header gap problems I referred to happen in both firefox and chrome. So it's a general problem due to not clearing the floated header. So if you fix this general problem by having the wrapper clear the floated header then you end up not having the firefox problem with the profile photo.

Derek Etnyre
Derek Etnyre
20,822 Points

Try changing

 display: inline-block; 

to be

 display: block;

and add: margin-left: auto; margin-right: auto;

to get image to center.

Michael Lee
Michael Lee
11,797 Points

Hi Derek, thanks for trying to help but I mentioned in my opening statement that display: block; causes the image to disappear in Firefox.

I was wondering what causes display: inline-block; to ignore the margin setting.

Michael Lee
Michael Lee
11,797 Points

Thanks Jason for that in-depth answer, your answer completely resolves the issue I had and I'm extremely grateful for your input :D.