html - margin : auto is not centering my div even though width is set

Question

好吧，这让我很烦恼，因为这是一个很小的问题 - 但显然我无法让它发挥作用。

我正在制作一个响应式/流畅的网站。这是 HTML:

<div id="Wrapper">
    <div id="InnerWrapper">
        stuff...
    </div>
</div>

CSS:

* {
    outline: none;
    font-family: 'PT Sans', sans-serif;
    font-size: 16px;
    resize: none;
    font-style: normal;
    font-variant: normal;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
html {
}
body {
    background: #f2f2f2; /*#f6f6f6;*/
    margin: auto;
    height: 100%;
    overflow-x: hidden;
}

/*MOBILE*/
@media (min-width: 200px) {
    #Wrapper {
        width: 100%;
        height: auto;
        float: left;
        margin: 42px 0 0 0;
    }
        #InnerWrapper {
            width: 96%;
            float: left;
            margin: 10px 2%;
        }
}
/*TABLET*/
@media (min-width: 600px) {
    #Wrapper {
        width: 100%;
        height: auto;
        float: left;
        margin: 42px 0 0 0;
    }
        #InnerWrapper {
            width: 96%;
            float: left;
            margin: 10px 2%;
        }
}
/*PC*/
@media (min-width: 980px) {
    #Wrapper {
        width: 980px;
        height: auto;
        margin: 42px auto 0 auto;
        border: 1px solid red;
    }
        #InnerWrapper {
            width: 980px;
            margin: 10px 0 0 0;
            border: 1px solid green;
        }
}

所以...当浏览器宽度超过 980px 时，设计应该固定为 980px。它没有做的是 - 居中!

我该如何解决这个问题。这让我很烦恼。

Answer 1

元素是float: left。 float 布局算法优先于边距并强制元素向左(允许跟随它的内容在它旁边冒泡)。

当你想让它居中时不要 float 它。