提问者:小点点

边距:自动不工作,但<中心>工作[重复]


我试着用“margin:auto”居中设置div,我甚至还设置了同样重要的功能,但它并不起作用。然后我尝试了中间标记:

<center><div></div></center>

起作用了!

那么,如何使用css而不是HTML将div居中呢?谢谢,这是我的代码:

<div style="margin: auto !important;">
<h1 style="color: yellow">Do you want to build a snowman?</h1>
<div class="head"></div>
<div class="eye1"></div>
<div class="eye2"></div>
<div class="nose"></div>
<div class="mouth"></div>
<div class="smile"></div>
<div class="body"></div>
<h2 style="color: yellow">yes?</h2>
</div>

共3个答案

匿名用户

您的容器已经是全宽的,您可以考虑在代码中添加以使文本居中,或者如果您想减小的宽度,您可以继续这样做,因为将处理它的居中问题。

匿名用户

只需将添加到父div而不是margin,它就会工作。

null

.container{
  text-align: center;
}
<div class=container>
<h1 style="color: yellow">Do you want to build a snowman?</h1>
<div class="head">head</div>
<div class="eye1">eye1</div>
<div class="eye2">eye2</div>
<div class="nose">nose</div>
<div class="mouth">mouth</div>
<div class="smile">smile</div>
<div class="body">body</div>
<h2 style="color: yellow">yes?</h2>
</div>

匿名用户

null

h1{
  color: yellow;
}
div{
  color: #000;
}
.container{
  margin: 20px auto;
  text-align: center;
}
<div class="container">
<h1>Do you want to build a snowman?</h1>
<div class="head">A</div>
<div class="eye1">B</div>
<div class="eye2">C</div>
<div class="nose">D</div>
<div class="mouth">E</div>
<div class="smile">F</div>
<div class="body">G</div>
<h2 style="color: yellow">yes?</h2>
</div>