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

Posted by John Lukacs
John Lukacs
26,806 Points

center image on the page.

I added a class to my img. My css wont work with it.
Why does it not center the image when I define margin: 0 auto;

Perry Eising
Perry Eising
12,663 Points

can you copy and paste your code here? There are lloooots of different reasons why this might be the case.

Marcus Parsons
Marcus Parsons
15,719 Points

If you're working with this in Workspaces, post us a snapshot of your workspace so that we don't have code everywhere. If you don't know how to do that, here's the forum post for you: http://www.teamtreehouse.com/forum/workspace-snapshots

If you're not working with Workspaces, refer to the Markdown Cheatsheet to how to post code to the forums.

2 Answers

Julien Chambers
Julien Chambers
9,540 Points
Julien Chambers
Julien Chambers
9,540 Points

Two things you need to make the margin: auto trick work: 1) It needs to be a block element. 2) you have to have a width specified

So something like the following should work:

img {
    max-width: 50%;
    margin: 0 auto;
    display: block;
}
John Lukacs
John Lukacs
26,806 Points
John Lukacs
John Lukacs
26,806 Points 
img {

 border:1px solid black;
 padding: 3px;
 position:relative;
 left: 10%;
 transition: transform 1s ease-in;
 transition-property:
}

Its strange I had to use postioning to get it to work. Do you have any ideas why a simple margin auto would not work