css - 我无法居中的 div 上的奇数左边距

Question

我一直想不通为什么这个 div 不会在它的容器中居中。

我有一个宽度为 100% 的固定顶部栏，然后是一个宽度为 750 像素且边距为自动的内部 div。然而，这个 div 不会位于中心位置，而是位于中心右侧约 200 像素处。

我已经在另一个 100% 宽度的容器中设置了另一个 div，它工作正常，但这不会。

我已经通过了 Firebug 检查器并尽我所能，但我似乎无法找到它为什么不能正确放置的原因。

向您展示的最简单方式是...

网址是:

我试图居中的 div 是最顶部栏中的黄色 div。它包含页面导航(下一个、上一个等)。

BETA 代码很简单:测试

如有任何想法，我们将不胜感激 :) 谢谢，克雷格。

HTML

<div id="sidebar">
  <!-- Content Here -->
</div>
<div id="topbar">   
    <div class="pagecontrol1">
        <!-- Content Here -->
</div>
</div>

CSS

#sidebar {
  width:250px;
  background-color:#fff;
  height: 100%;
  float:left;
  position:fixed;
  border-right: 0px solid #333;
  z-index: 996;
  -webkit-box-shadow: 2px 0px 5px -2px #888;
  -moz-box-shadow:    2px 0px 5px -2px #888;
  box-shadow:         2px 0px 5px -2px #888;
}
#topbar {
  height: 35px; 
  width: 100%; 
  background-color:#444; 
  position:fixed; 
  z-index: 950; 
  border-bottom: 1px solid #222;
  border-top: 1px solid #222;
}
.pagecontrol1 {
   width: 750px;
   height: 100%;
   margin: auto;
   background-color: #ff0;
}

Answer 1

100% 的宽度占据了 100% 的页面，因此当它被 sidebar 向左移动时，您会看到它向右移动了 250 像素。您的 pagecontrol1 类应该如下所示:

.pagecontrol1 {
  position:fixed;
  left:250px;
  right:0px;
  height:35px; /* Instead of 100% */
  margin:auto;
  background: #ff0;
}

我添加了 position:fixed, left:250px;, right:0px; 并更改了 height:100% 到 height:35px。我在浏览器中进行了编辑，对 pagecontrol1 类所做的这些更改看起来不错。