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

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

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

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

不，什么都没有发生，元素仍然向左而不是居中。

score 18 · Accepted Answer

您需要将宽度设置为#team，例如：

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

...这是以下的简写版本：

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

score 3 · Accepted Answer

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

img{
 display: block;
}

score 2 · Accepted Answer

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

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

这是一个小提琴：JS Fiddle

score 2 · Accepted Answer

float 也会对此感到不安。 float:none;如果您认为它可能从某个地方的另一个规则继承了“float”指令，那么它就可以解决问题。

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

0

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

于 2013-09-30T07:22:39.467 回答

6 回答 6