css HTML中心内容通过边距自动不工作

jdzmm42g 于 2023-03-25 发布在其他

关注(0)|答案(8)|浏览(123)

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

然而，子元素divider和team pic都在左边，我认为margin：auto会使所有内容居中。
然后我把下面的内容放到子元素中。

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

没有，什么也没有发生，元素仍然向左，没有居中。

8条答案

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

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

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

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

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

img{
 display: block;
}

float也会破坏这个..如果你认为float:none;可能从另一个规则继承了一个'float'指令，那么float:none;就可以做到这一点。

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

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

这里有一个小提琴：JS Fiddle

使用display：block;为图像类。

赞(0）回复(0）举报 2023-03-25

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

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

如果你不想给予固定的宽度，那么我们可以选择宽度：最大含量;

#team {
  width: max-content;
  margin: 0 auto;
}

另一件可能让你绊倒的事情是，如果你有任何相邻的显示器：Flex标记。
有时只有一个兄弟节点设置了flex-grow：1，它会吃掉所有的宽度，所以边距没有自动增长的空间。
要解决这个问题，请确保两个兄弟节点以相同的速率增长。如果您希望将两者都以边距居中，则它们应该具有相同的flex-grow。