Question

我读了this并写了这段代码：

  .wholePageDivForCentering
   {
        width: 80%;
        white-space: nowrap;
        display:inline-block;
        margin: 0 auto;
        border: 4px solid red;

       /* other stuff I tried........*/
       /*padding-left: 10%;*/
       /*margin-left: 10%;*/
       /*padding-right: 10%;*/
       /*margin-right: 10%;*/

   }



  <body>
     <div class="wholePageDivForCentering">
        <h2>Hello from the page</h2>
       <!-- stuff such as 2 nested divs contained text labels, and a small image -->
     </div>
  </body>

我在最外面的div周围放了一个红色的4像素边框，原因很简单。

我想看看那个最外面的div周围是否有那个厚红色边框矩形页面上的水平居中本身。

IT DID NOT。
编辑：当浏览器最大化时，我最外面的div保持在左侧。

你可以看到我尝试了不止一件事。在我看来，我应该能够：

告诉这个最外面的div，一个带有厚红色边框的div，占据80％的浏览器窗口
然后使用上述SO帖子的建议（再次，here） - 得到这个最外层的div总是占据浏览器窗口的80％但是在HORIZONTALLY CENTERED 在浏览器窗口上。

我个人？我认为我的保证金 - 左= 10％，保证金权利= 10％应该这样做但不是。

要查看我想要的内容，请在http://sfbay.craigslist.org/打开Craigslist 并最大化浏览器窗口（CL网站的主页面，而不是嵌套页面）。

Craiglist main两侧的空白的水平宽度最大化浏览器时页面是相同的。主页的列是水平居中。

因为（可能）该页面有一个围绕所有内容的居中div 主菜单上的其他内容。

我该怎么做？

Answer 1

取出display:inline-block，它应该有用。

这是一个Jsfiddle（点击运行）：http://jsfiddle.net/zKm6b/

我还建议使用id而不是该div的类。我希望有所帮助！

Answer 2

为什么设置display: inline-block。如果显示为块（默认情况下为div，则可以通过删除显示来解决问题），它将起作用。

页面上最主要的div不会居中

2 个答案: