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

Answer 2

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

img{
 display: block;
}

Answer 3

团队需要有一个宽度才能使用margin：auto。

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

这是一个小提琴：JS Fiddle

Answer 4

浮动也会让你感到不安。float:none;如果你认为它可能继承了一个＆＃39;浮动＆＃39;来自其他规则的指令。

Answer 5

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

基本上保证金取决于宽度，当且仅当我们想要在页面中心显示我们的div。

Answer 6

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