我试着用“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>
您的容器已经是全宽的,您可以考虑在代码中添加
只需将
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>