Question

我是css的新手，我很难将两个div中心化。我有一个1920 x 1080的屏幕分辨率，如果我的网站访问者的分辨率较低，使用保证金将不会使两个div居中。我知道它会动起来，对吗？

详细说明：

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

Div id = Topwrapper
Div id = MainWrapper：保存容器和侧边栏（灰色）
Div id =容器（黄绿色）
Div id =补充工具栏（蓝色）

我对Topwrapper没有任何问题，正如你所看到的，它处于中心位置，但我的大问题是容器和侧边栏。我不能将它与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

试试这个：

#MainWrapper {
    height:3000px;
    width:1000px;
    background-color:#CCC;
    margin:0 auto;

}

#TopWrapper {
    background-color:#000000;
    min-width:100%;
    height:77px;
    margin: 0;
}

#Content {
    height:3000px;
    width:630px;
    background-color: #0F0;
    float:left;


}

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

如果这不是你想要的，请告诉我。我很乐意和你合作。

哦，如果你想让背景成为某种颜色，只需添加：

    body {
    background-color:#CCC; /* or whatever colour you like */
}

Answer 2

您可以设置现有div“#MainWrapper”的宽度，该宽度补充了已包含内容的两个div，确保两者之间有空间并为两侧留出余量（可能比宽度大30px）两个div的总和），然后给出“margin-left：auto;”和“margin-right：auto;” div #MainWrapper让它居中。然后，您需要设置“body”标签的样式，以便为其提供所需的颜色。

Answer 3

这是另一个解决方案，将你的内容包装到另一个宽度为1000px的div中，然后设置margin：0 auto;这意味着它在页面上居中，它对任何屏幕分辨率都是流畅的

这是带有新样式ID内容包装器和HTML

的CSS

#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;
    width:630px;
    background-color: #0F0;
    float:left;
    display:inline;
}
#Sidebar {
    height:3000px;
    width:350px;
    background-color: #00F;
    margin-left:20px;
    float:left;
    display:inline;
}
#content-wrapper {
    margin:0 auto;
    width:1000px;
}

<div id="TopWrapper"></div>
<div id="MainWrapper">
  <div id="content-wrapper">
    <div id="Content"></div>
    <div id="Sidebar"></div>
  </div>
</div>

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

3 个答案: