居中页面异常

Question

我试图保持主 div 始终居中，但是当将浏览器窗口的大小调整为从 900 像素开始的最小尺寸时，我怎样才能使“主”保持在左侧，并且只有在更大的屏幕或 900 像素以上时，他才开始居中页面在中间？

提前致谢

CSS：

body {
   font: 24px Helvetica;
   background: #999999;
   min-width: 900px;
   margin: 0;
  }

#main {
    margin-left: auto;
    margin-right: auto;
    clear: both;
}


header {
    width: 100%;
    background: yellow;
    text-align: center;
}

nav {
    width: 20%;
    min-width: 120px;
    max-width: 300px;
    float: left;
    height: 600px;
    background: orange;
    text-align: center;
}

article {
    width: 80%;
    min-width: 400px;
    max-width: 1200px;
    float: left;
    height: 600px;
    background: yellow;
    text-align: center;
}

footer {
    width: 100%;
    float: left;
    height: 100px;
    background: blue;
    text-align: center;
}

HTML：

 <header>header</header>
 <div id='main'>

     <nav>nav</nav>
     <article>article</article>

 </div>
 <footer>footer</footer>

Answer 1

您可以使用以下媒体查询：

#main {
    clear: both;
}

@media screen and (min-width: 900px) {
    #main {
        margin:auto;
        width: 900px; // will need some sort of width adding either here or above for a default width
    }
}

Example

Answer 2

抱歉，您问题中的语言开始与拼写错误有点混淆。所以对我来说很清楚的是，您希望某些 CSS 应用到某个屏幕宽度以下，而其他 CSS 应用到某个屏幕宽度以上。这可以使用媒体查询来实现。请看下面：

以下 CSS 适用于宽度不超过 900 像素的屏幕。

@media only screen and (max-width: 900px) {
  #main {
    margin-left: 0;
    margin-right auto;
    clear: both;
  }
}

以下 CSS 适用于宽度超过 900 像素的屏幕。

@media only screen and (min-width: 900px) {
  #main {
    margin-left: auto;
    margin-right: auto;
    clear: both;
  }
}

您可以在此处阅读有关媒体查询的更多信息： http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

希望这会有所帮助。