Question

我正在为响应式网站创建一个狭窄的样式表。当浏览器的宽度介于0px和400px之间时，它会生效。（见下文）

<link href="css/narrow.css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width: 400px)" />

我的目标是让内容始终以浏览器为中心，无论尺寸如何。问题是，包装器div似乎保持400px宽，并且即使包装器div设置为100％也不响应浏览器宽度。

这是HTML：

<body>

    <div id="wrapper"> <!-- Start Wrapper -->

        <div id="sidebar"> <!-- Start Sidebar -->
        </div> <!-- End Sidebar -->

        <div id="mainContent"> <!-- Start Main Content -->

            <div id="about"> <!-- Start About -->
            </div> <!-- End About -->

            <div id="services">  <!-- Start Services --> 
                 <div id="servicesWrapper"> 
                 </div>
            </div> <!-- End Services -->

            <div id="work"> <!-- Start Work -->
            </div> <!-- End Work -->

            <div id="contact"> <!-- Start Contact -->
            </div> <!-- End Contact -->

        </div> <!-- End Main Content -->


    </div> <!-- End Wrapper -->
    </body>

这是CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

#wrapper {
    text-align: center;
    width: 100%;
}

#sidebar {
    background-color: #FFF;
    width: inherit;
    height: 300px;
    top: 0;
    margin-bottom: 10%;
    position: fixed;
    z-index: 2;
}

#mainContent {
    margin-left: auto;
    margin-right: auto;
}

#about {
    width: 65%;
    margin-left: auto;
    margin-right: auto;
    min-height: 600px;
    max-height: 100%;
    position: relative;
    margin-top: 350px;
    z-index: 1; 
}

#services {
    width: 65%;
    margin-left: 5%;
    min-height: 600px;
    max-height: 100%;
}

#work {
    width: 65%;
    margin-left: 5%;
    height: 600px;
    max-height: 100%;
}

#contact {
    width: 65%;
    margin-left: 5%;
    height: 600px;
    max-height: 100%;
}

Answer 1

这不是你的问题。您的问题是，您尝试使用文字 -align来居中块元素。如果您想通过text-align实现div，则需要在其上设置display:inline-block;。

有关详细信息，请参阅Vertically aligning block element to image?（对于垂直情况，但适用相同的想法）

Answer 2

首先，text-align: center仅适用于内联元素。使用边距#wrapper将包含元素margin: 0 auto居中。如果宽度为100％，这不会做很多事情。

您的媒体查询（如果我错了，请纠正我）不需要最小宽度，只需要max-width属性。最大宽度是，＆＃34;如果宽度大于400px，请不要使用此样式表。＆＃34;

根据我的测试，上面的代码经过我的小改动，适用于Chrome，FireFox和IE9（虽然不是IE8及以下版本）。

宽度100％超过100％的屏幕

2 个答案: