HTML中心内容通过边距自动不起作用答案

【问题标题】：HTML center content through margin auto not workingHTML中心内容通过边距自动不起作用
【发布时间】：2013-03-19 12:12:28
【问题描述】：

我有以下 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;
}

但是，子元素分隔符和团队图片一直在左侧。我虽然 margin:auto 会将所有内容居中。

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

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

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

【问题讨论】：

标签： html css

【解决方案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;
}

【讨论】：

【解决方案2】：

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

img{
 display: block;
}

【讨论】：

【解决方案3】：

float 也会扰乱这一点。如果您认为float:none; 可能会从某个地方的另一个规则继承“float”指令，那么它就可以解决问题。

【讨论】：

【解决方案4】：

团队需要有一个宽度才能使用边距：自动。

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

这是一个小提琴：JS Fiddle

【讨论】：

【解决方案5】：

*使用显示：块；对于图像类。*

【讨论】：

【解决方案6】：

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

基本上边距取决于宽度当且仅当我们想在页面中心显示我们的 div。

【讨论】：