HTML中心内容通过保证金自动不起作用 [英] HTML center content through margin auto not working

问题描述

我有以下Html代码

 < div id =team> 
< h1>团队< / h1> 
< img src =assets / divider.pngid =divider> 
< img src =assets / team.pngid =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; 
} 
  

不，没有任何事情发生，元素仍然保留并且不居中。

<$>

解决方案

p $ p> div＃team {
margin：0 auto;
width：800px;
}


I have the following Html code

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

The following CSS

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

However, the child elements divider and team pic are all the way to the left. I though margin:auto would center everything.

then I put the following into the child elements.

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

Nope, nothing happen, the elements still to left and not centered.

解决方案

You need to set a width to #team, for example:

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

这篇关于HTML中心内容通过保证金自动不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！