Question

因为我的生活无法弄清楚为什么这个div不会集中在它的容器中。

我有一个固定的顶部条，宽度为100％，然后是一个内部div，宽度为750px，边距为auto。然而，这个div不会坐在中心位置，而是位于中心右侧200px左右。

我已经有另一个div在另一个100％宽度的容器中居中，并且工作正常，但这不会。

我已经通过了萤火虫检查员并且尽我所能地玩了，我似乎无法找到它为什么不能正确坐着。

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

网址是：

我想要居中的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向左移动时，你会看到它向右推动250px。您的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类的更改看起来很好。

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

1 个答案: