jason white jason white - 4 months ago 11
HTML Question

HTML center content through margin auto not working

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

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

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