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。浮动布局算法优先于边距并强制元素向左移动（允许其后面的内容在其旁边冒泡）。

当你想让它居中时，不要漂浮它。

margin：即使设置了width，auto也不会使我的div居中

1 个答案: