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;
}

然而，子元素 divider 和 team pic 一直在左边。我虽然 margin:auto 会使一切居中。

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

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

不，什么都没有发生，元素仍然在左边并且没有居中。

原文由 jason white 发布，翻译遵循 CC BY-SA 4.0 许可协议

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;
}

原文由 Sandro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

默认情况下，图像是内联级别元素。如果您希望图像和边距正常工作，则需要使用 display:block; 。

 img{
 display: block;
}

原文由 Gabriel Ferraz 发布，翻译遵循 CC BY-SA 3.0 许可协议