为什么我的中心对齐的div不向左滚动？

Question

（注意：这些div上没有滚动条，因此无论是在体内还是在div本身内，都无法向左滚动。）

在“巴洛克”和“聚光灯”主题选项（参见下面的链接）中存在的问题（如上图中的FF和Opera）是当你缩小浏览器时（例如在~900宽度以下） ，水平滚动条不向左滚动。它会向右滚动，但如果导航菜单从屏幕左侧移开并完全无法访问，它根本不关心。

是什么让它做到这一点？

以下是相关的HTML：

<div class="center1">
<div class="center2">
  <div style="position:relative; top:180px; width:1226px;" id="containerBGimgLParent">
    <div id="containerBGimgL"></div><img src="images/skin3/dark_interface_parts5b.png">
  </div>
</div>
</div>

<div class="center1">
<div class="center2">
<div id="containerBG">
    <div id="NavMenu">
                <ul class="kwicks">
            <li id="kwick1"></li>
            <li id="kwick2"></li>
            <li id="kwick3"></li>
            <li id="kwick4"></li>
            <li id="kwick5"></li>
            <li id="kwick6"></li>
            <li id="kwick7"></li>
                </ul>
    </div>
</div>
</div>
</div>

<div id="contentdiv"></div>

...和CSS：

body {
    background-image: url("../images/skin3/DIBG.png");
    background-repeat: repeat;
    font-family: "Times New Roman";
}

#NavMenu {
    float:left;
    width:170px;
    background-color: #000; 
    padding:5px; 
}

.center1 {
    position:absolute;
    right:50%;
}

.center2 {
    position:relative;
    left:50%;
}

#containerBGimgL {
    background-image:url('../images/skin3/dark_interface_parts5a.png');
    background-repeat: no-repeat;
    width:1040px;
    height:672px;
    display:inline-block;
}

#containerBG {
    width: 980px; 
    position:relative;
    top:274px;
}

#contentdiv
{
    position:absolute;
    top:320px;
    left:700px;
    width:600px;
    height:526px;

    text-align:left;

    padding: 0px 20px 0px 0px;
    background-color: #000;
    overflow-y: scroll;
    color:#fff;
}

javascript调整大小功能会更改几个div的尺寸，但不会导致此问题。例如，它不会将任何div的溢出更改为隐藏。

要查看问题，请点击此处：http://www.solarcoordinates.com/testing3/index.html。 （当我禁用JS时，我目前没有它工作，所以如果你想看看，必须启用JS。）

Answer 1

您应该使用另一种方法将主要部分居中：

• 在.center1上移除您的position和right规则。
• 在.center2上移除您的position和left规则。
• 在#containerBG上，添加margin: 0 auto以使其再次居中。

在启用了JS的情况下在Chrome中进行测试，并将窗口大小调整为几个不同的大小，它看起来和以前一样，但问题是修复的。

它也适用于Firefox，只是测试过它。

您似乎不再需要<div class="center1">和<div class="center2">。你可以删除它们。