HTML center content through margin auto not working

Question

I have the following Html code

<div id="team">
    <h1>Team</h1>
    <img src="assets/divider.png" id="divider">
    <img src="assets/team.png" id="team_pic">
</div>

The following CSS

div#team {
    margin: 0 auto;
    margin-left:auto;
    margin-right:auto;
    right:auto;
    left:auto;
}

However, the child elements divider and team pic are all the way to the left. I though margin:auto would center everything.

then I put the following into the child elements.

div#team img#team_pic {
    width:704px;
    height:462px;
    margin-left:auto;
    margin-left:auto;
}

Nope, nothing happen, the elements still to left and not centered.

Answer 1

You need to set a width to #team, for example:

div#team {
   margin: 0 auto;
   width: 800px;
}

... which is a shorthand version of:

div#team {
    margin-top: 0;
    margin-left: auto;
    margin-bottom: 0;
    margin-right: auto;
    width: 800px;
}

Answer 2

Images are inline level elements by default. You need to use display:block; if you want your images and margin to work properly.

img{
 display: block;
}

Answer 3

Team needs to have a width to be able to use margin: auto.

div#team {
    margin: 0 auto;
    width: 400px;
}

Here is a fiddle: JS Fiddle

Answer 4

float will upset this too.. float:none; does the trick if you think it may be inheriting a 'float' directive from another rule somewhere.

Answer 5

#team { 
    margin: auto; 
    width: 400px;
}

Basically margin depends on width if and only if we want to show our div in the center of the page.

Answer 6

* Use the display:block; for the images classes. *