Question

我有一个居中的网页，现在我已经使用媒体查询调整了大小，但我不知道如何实现像stackoverflow本身那样的东西。一旦减小了页面的宽度，它就越来越小，边距向左减小;所以在某一点上页面填满了整个窗口。我使用了很多margin-left: 25%来使页面居中，但这不像我想要的设计那样工作。一旦我调整浏览器窗口的大小，页面宽度就会变小并保持居中，而我并不希望宽度变小，而是减小页面左右两侧的空间。

这是我使用的标题：

margin-top: 3%;
float:left;
font-size: 350%;
margin-left: 25%;
width:10%;

这是该网站的“中间”，具有白色背景：

position: absolute;
border-radius: 3px;
top: 0px;
left: 21%;
width: 58%;
min-height: 100%;
background: white;
z-index: -1;
-webkit-box-shadow: 20px 0px 30px 0px rgba(0,0,0,0.5), -20px 0px 30px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 20px 0px 30px 0px rgba(0,0,0,0.5), -20px 0px 30px 0px rgba(0,0,0,0.5);
box-shadow: 20px 0px 30px 0px rgba(0,0,0,0.5), -20px 0px 30px 0px rgba(0,0,0,0.5);

对不起，这可能很容易，但我真的不明白......

由于

Answer 1

我认为您需要将左右边距设置为自动。不是25％。

像这样：

margin-left:auto;

margin-right:auto;

但您必须定义应用auto值的容器宽度。

如果您查看评论中提供的示例网站的CSS：

#mainbody {
   width: 980px; /*this line*/
   text-align: center;
   vertical-align: top;
   padding: 0;
   margin: auto; /*this line*/
   height: auto;
   background: #fff;
}

CSS中心响应

1 个答案: