HTML中心内容通过保证金自动无效

Question

我有以下Html代码

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

以下CSS

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

但是,子元素分隔符和团队图片一直向左.我虽然保证金:汽车将中心的一切.

然后我将以下内容放入子元素中.

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

没有,没有任何事情发生,元素仍然留下而不是居中.

Answer 1

您需要将宽度设置为#team,例如:

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

...这是一个速记版本:

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