Question

我想知道是否有人建议在调整页面大小时如何最好强制两个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 */
            }
    }

Answer 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>

Answer 2

此处您不需要媒体查询。

试试这个。

#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;
  }

Demo here

在调整大小时居中两个框

2 个答案: