我想知道是否有人建议在调整页面大小时如何最好强制两个div居中。
以下是相关的html:
<div id="body">
<div id="top"></div>
<div id="content">
<div id="box1"></div>
<div id="box2"></div>
</div>
<div id="footer"></div>
</div>
我通常希望框1和框2 div与彼此的left and right对齐。所以我使用以下CSS:
#box1, #box2
{
float:left;
max-width:25em;
min-width:20em;
width:45%;
}
我想解决的问题是如何最好地让它们堆叠,然后在页面调整大小时居中。期望的外观是:
我知道我使用这样的媒体查询:
@media screen and (max-width: 800px)
{
#box1, #box2
{
/* SOMETHING */
}
}
答案 0 :(得分:1)
以下内容应放在媒体查询中:
float: left;
。这是因为div
是block
个元素,会自动移动到新行div
width
,因此添加margin: 0 auto;
将使其成为中心
#box1 {
background-color: red;
}
#box2 {
background-color: blue;
}
#box1, #box2 {
float: left;
max-width: 25em;
min-width: 20em;
width: 45%;
}
@media screen and (max-width: 800px) {
#box1, #box2 {
float: none;
margin: 0 auto;
max-width: 25em;
min-width: 20em;
width: 45%;
}
}
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
答案 1 :(得分:1)
此处您不需要媒体查询。
试试这个。
#content {
text-align: center;
display:inline-block;
border:thick dotted #060;
margin: 0px auto 10px auto;
width:100%;
}
#box1,
#box2
{
max-width:25em;
min-width:20em;
width:45%;
height: 50px;
background: #999;
display: inline-block;
}