Question

许多网站使用页面最小宽度的技术，如果浏览器比这更宽，则内容居中。一个完美的例子，如果这个Facebook，如果你打开http://www.facebook.com并将浏览器窗口拖动到其最小宽度，然后慢慢拖出它，直到窗口像屏幕允许的那样宽。您会注意到页面的内容大小相同，但在有空间时会保持居中。这是如何实现的？

Answer 1

您也可以设置宽度或均匀最大宽度：

#maincontainer {
width:90%; /* to show it can have width + max-width */
max-width:1020px;
margin:auto;
}

Answer 2

这让我想起了网格系统。

无论如何，希望我能得到你在这里所要求的......从我的观点来看，基本上你只需要定义内容的width并将margin（左和右）设置为'汽车'。这是我在设计网页时经常做的事情。

CSS

.pgheader, .pgbody, .pgfooter {
    margin: 0;
    padding: 20px;
}
.pageWrapper {
    margin: 0 auto;
    width: 960px; /* this if you go with fixed sized */

    /*** if you want to go with dynamic width (either min- or max-width),
         you can go with the following

    width: 90%;
    min-width: 960px;

    ***/
}

HTML

<body>
    <div class="pgheader">
        <div class="pageWrapper">
            ... content goes here ...
        </div>
    </div>
    <div class="pgbody">
        <div class="pageWrapper">
            ... content goes here ...
        </div>
    </div>
    <div class="pgfooter">
        <div class="pageWrapper">
            ... content goes here ...
        </div>
    </div>
</body>

Answer 3

使用CSS媒体查询。给http://css-tricks.com/css-media-queries/一个阅读，这是一个很好的介绍。

Answer 4

由于我没有找到我在这里寻找的东西，我玩了一些css属性，最终得到了我想要的东西。它基本上将两个包装器组合在一起以保持水平居中，同时在两侧保持边距，并在身体本身上保持最小化。我把一个jsFiddle放在一起，展示它是如何工作的。

http://jsfiddle.net/eDWKw/

<body>
    <div class="margin-wrapper">
       <div class="centered-wrapper">
            content
       </div>
    <div>
</body>


body{
    min-width:400px;
}
.margin-wrapper{
    margin-right:80px;
    margin-left:80px;
}
.centered-wrapper{
    width:300px;
    margin:0 auto;
}

窗口足够宽时的中心内容

4 个答案:

CSS

HTML