我正在考虑将 jQuery 随机淡入用于网站标题。更改视口(viewport)大小时,div 会按照我的需要堆叠(全尺寸连续排列,随着屏幕变小,堆叠最多为 3x3)。但是,我不知道如何让这组div在页面上居中>
#header {
width: 100%;
margin: 0 auto;
padding-top: 20px;
}
#boxset div {
width: 100px;
height: 100px;
float: left;
overflow: hidden;
margin-right: 8px;
margin-bottom: 8px;
}
#boxset div p {
margin: 0;
background: #290052;
color: #fff;
font-size: 40px;
width: 100%;
height: 100%;
/*display: none;*/
padding-top: 26px;
text-align: center;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
<div id="header">
<div id="boxset">
<div>
<p><a href="index.html">A</a>
</p>
</div>
<div>
<p><a href="index.html">B</a>
</p>
</div>
<div>
<p><a href="index.html">C</a>
</p>
</div>
<div>
<p><a href="index.html">D</a>
</p>
</div>
<div>
<p><a href="index.html">E</a>
</p>
</div>
<div>
<p><a href="index.html">F</a>
</p>
</div>
<div>
<p><a href="index.html">G</a>
</p>
</div>
<div>
<p><a href="index.html">H</a>
</p>
</div>
<div>
<p><a href="index.html">I</a>
</p>
</div>
</div>
</div>
最佳答案
你可以使用 display: inline-block;而不是 float ,然后文本对齐:居中;在 parent 身上:
#header {
text-align: center;
}
#header div {
display: inline-block;
}
关于jquery - 将 div 组居中作为响应式网站标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32910886/