css - 考虑到用户的不同分辨率，如何使两个 div 居中

Question

我是 css 的新手，我无法将两个 div 居中。我有一个 1920 x 1080 的屏幕分辨率，如果我网站的访问者分辨率较低，则使用边距不会使两个 div 居中。我知道它会移动，对吗？

详细信息:

请在这里看看我的问题---> http://i1204.photobucket.com/albums/bb409/bendaggers/help.png

• Div id = Topwrapper
• Div id = MainWrapper:容纳容器和侧边栏(灰色)
• Div id = Container(黄绿色)
• Div id = 侧边栏(蓝色)

我对 Topwrapper 没有问题，如您所见，它位于中心位置，但我最大的问题是 Container 和 Sidebar。我无法将它与 Topwrapper 对齐。你能帮我编码吗？另一件事，你能不能考虑一下屏幕分辨率，据我所知，我的 Mainwrapper 代码会因为 min-width=1000px 而调整它的宽度；

如果你认为你对我的代码有更好的想法，请随时修改它。

    <div id="TopWrapper"></div>
    <div id="MainWrapper">

        <div id="Content"></div>
        <div id="Sidebar"></div>

    </div>

#MainWrapper {
    height:3000px;
    min-width:1000px;
    background-color:#CCC;

}

#TopWrapper {
    background-image:url(images/topwrapper.png);
    background-repeat:no-repeat;
    background-position: center bottom;
    min-width:100%;
    height:77px;
    margin: 0;
}

#Content {
    height:3000px;
    min-width:630px;
    background-color: #0F0;
    float:left;
    margin-left:150px;
    display:inline;


}

#Sidebar {
    height:3000px;
    min-width:350px;
    background-color: #00F;
    margin-left:20px;
    float:left;
    display:inline;
}

非常感谢您!

Answer 1

您可以为现有的 div“#MainWrapper”设置样式，使其宽度与两个已包含内容的 div 相辅相成，确保它们之间有空间并在两侧留出空间(可能比宽度宽 30px)两个 div 的总和)，然后给出“margin-left:auto;”和“右边距:自动；”到 div #MainWrapper 所以它居中。然后您需要设置“body”标签的样式以赋予它您想要的颜色。