Question

我正在处理一个页面，我想让页面位于浏览器的中心。它在放大时正如预期的那样工作。但是当它缩小时，页面会向右移动。谁能告诉我我做错了什么？感谢。

enter image description here

如果我缩小它会变成： enter image description here

<html>
<head>
<title>Test page</title>
</head>
<link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />

<body onload="init()";>

<!-- container panel-->
<div id="container">  

    <!-- header panel-->
    <div class="header">sssss</div>

    <div id="main">
    <!-- left panel-->

        <div class="leftpanel">sssss</div>

        <div class="rightpanel">
            <div class="toppanel">sssss</div>
            <div class="content">sssss</div>
        </div>
    </div>

    <!-- footer-->
    <div class="footer">sssss</div>

</div>
</body>
</html>

这也是css部分：

#bg1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #8888ff;
    z-index: 1;
    box-shadow: inset 0px 280px 60px 0px rgba(0,0,0,0.3);
}
#container {
    position: relative;
    z-index: 3;
    width: 1000px;
    margin: 0 auto 0 auto;
    background: #ffffff;
    box-shadow: 0px 15px 15px 5px #444444;
}
#main
{
    position: relative;
    padding: 60px 28px 0px 28px;
    width: 1124px;
}
body 
{ 
    float: center;
    text-align: center; 
    width: 1500px;
    margin:0 auto;
    background-color: 7777ff;
} 
.leftpanel
{
    width: 18%;
    float: left;
    padding: 10;
    padding-top: 20;
    margin-bottom: 40;
    background: orange;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    box-shadow: 5px 5px 5px #888;
}
.rightpanel
{
    position: relative;
    width: 70%;
    margin: 0 0 0 160px;
}
.toppanel
{
    margin-left: 70px;
    background-color: #fbbbb9;
    padding: 20px;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    box-shadow: 5px 5px 5px #888;   
}
.content
{
    margin-left: 70px;
    padding-bottom: 50px;
    background-color: white;
}
.box {
    margin: 0 0 30px 0;
    background-color: orange;
    overflow: hidden;
}
.footer
{
    padding: 40px 0 40px 0;
    text-align: center;
    color: white;
}

Answer 1

删除<body>标记上的宽度，这样可以解决您的问题。

Answer 2

body不应该有width 1500px，应该是100％; #container应为max-width:1000px; width:100%; 另外，将#container锚定到body

请进行以下更改：

#bg1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #8888ff;
    z-index: 1;
    box-shadow: inset 0px 280px 60px 0px rgba(0,0,0,0.3);
}
body #container {
    position: relative;
    z-index: 3;
    max-width:1000px;
    width:100%;
    margin: 0 auto;
    background: #ffffff;
    box-shadow: 0px 15px 15px 5px #444444;
}
#main
{
    position: relative;
    padding: 60px 28px 0px 28px;
    width: 1124px;
}
body 
{ 
    float: center;
    text-align: center; 
    width: 100%;
    margin:0 auto;
    background-color: 7777ff;
} 
.leftpanel
{
    width: 18%;
    float: left;
    padding: 10;
    padding-top: 20;
    margin-bottom: 40;
    background: orange;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    box-shadow: 5px 5px 5px #888;
}
.rightpanel
{
    position: relative;
    width: 70%;
    margin: 0 0 0 160px;
}
.toppanel
{
    margin-left: 70px;
    background-color: #fbbbb9;
    padding: 20px;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    box-shadow: 5px 5px 5px #888;   
}
.content
{
    margin-left: 70px;
    padding-bottom: 50px;
    background-color: white;
}
.box {
    margin: 0 0 30px 0;
    background-color: orange;
    overflow: hidden;
}
.footer
{
    padding: 40px 0 40px 0;
    text-align: center;
    color: white;
}

你可以在jsfiddle上看到这个：http://jsfiddle.net/MX9kC/

Answer 3

<html>
<head>
<title>Test page</title>
</head>
<link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />

<body onload="init()";>

<!-- container panel-->

<center>
<div id="container">  

    <!-- header panel-->
    <div class="header">sssss</div>

    <div id="main">
    <!-- left panel-->

        <div class="leftpanel">sssss</div>

        <div class="rightpanel">
            <div class="toppanel">sssss</div>
            <div class="content">sssss</div>
        </div>
    </div>

    <!-- footer-->
    <div class="footer">sssss</div>

</div>

</center>
</body>
</html>

它会起作用

如何使用许多div结构来居中网页内容

3 个答案: