HTML center content through margin auto not working

[needleboy]

I have the following Html code\[code\]<div id="team"> <h1>Team</h1> <img src="http://stackoverflow.com/questions/15692302/assets/divider.png" id="divider"> <img src="http://stackoverflow.com/questions/15692302/assets/team.png" id="team_pic"></div>\[/code\]The following CSS\[code\]div#team { margin: 0 auto; margin-left:auto; margin-right:auto; right:auto; left:auto;}\[/code\]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.\[code\]div#team img#team_pic { width:704px; height:462px; margin-left:auto; margin-left:auto;}\[/code\]Nope, nothing happen, the elements still to left and not centered.