2013-03-28 90 views
4

我有以下的HTML代码通过不工作

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

下面的CSS保证金自动HTML中心内容

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

然而,子元素分隔和团队PIC是一路向左。我虽然保证金:汽车将集中一切。

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

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

不,没有任何事情发生,元素仍然是左边的,没有居中。

回答

12

您需要设置一个宽度#team,例如:

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

团队需要有宽度才能够保证自动。

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

这里是提琴:JS Fiddel

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

基本上利润率取决于宽度当且仅当我们希望在页面的中心显示我们的div。

0

* 使用 display:block; 为图像类。 *

3

默认情况下,图像是内嵌级别元素。如果您希望图像和边距正常工作,则需要使用display:block;。如果你认为它可能从另一个规则某处继承了“浮动”指令

img{ 
display: block; 
} 
2

浮动会干扰这种太.. float:none;的伎俩。