Css 页面上最外层的主分区将不居中_Css_Html

Css 页面上最外层的主分区将不居中

css html

Css 页面上最外层的主分区将不居中,css,html,Css,Html,我阅读并编写了以下代码： .wholePageDivForCentering { width: 80%; white-space: nowrap; display:inline-block; margin: 0 auto; border: 4px solid red; /* other stuff I tried........*/ /*padding-left: 10%;*/

我阅读并编写了以下代码：

  .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>

.wholePageDivForCenter
{
宽度：80%；
空白：nowrap；
显示：内联块；
保证金：0自动；
边框：4倍纯红；
/*我试过的其他东西*/
/*左：10%*/
/*左边距：10%*/
/*右：10%*/
/*保证金权利：10%*/
}
您好，来自页面

出于某种原因，我在最外层的div周围放了一个4像素的纯红边框

我想看看围绕最外层div的那个厚厚的红色边框矩形是否会在页面上水平居中
但事实并非如此。
编辑：当浏览器最大化时，我最外层的div保持在左侧
你可以看到我尝试了不止一件事。在我看来，我应该能够：

告诉这个最外层的分区，那个有着厚厚的红色边框的分区，占据80%的空间浏览器窗口

然后使用上面的建议（再次）发布——得到这个最外层的div始终占据浏览器窗口的80%，但水平居中在浏览器窗口上

我个人？我认为我左边的利润率=10%，右边的利润率=10%应该这样做，但不行
看看我想要什么——打开Craigslist 并最大化浏览器窗口（CL站点的主页，而不是嵌套页面）
Craiglist main两侧空白的水平宽度最大化浏览器时，页面是相同的。主页的列是水平居中
因为（也许）该页面有一个围绕所有内容的居中div 主页上的其他内容

我怎么做？
为什么要设置
显示：内联块
。如果display是block（默认情况下是div，因此可以通过删除display来解决问题），它将起作用。
为什么要设置
display:inline block
。如果display是block（默认情况下，div是一个div，因此您可以通过删除display来解决问题）。
取出
display:inline block
，它应该可以工作
下面是一个JSFIDLE（单击运行）：

我还建议对该分区使用id而不是类。我希望这会有所帮助
取出
显示：内联块
，它应该可以工作
下面是一个JSFIDLE（单击运行）：

我还建议对该分区使用id而不是类。我希望这会有所帮助
为什么设置为显示：inlineblock？-我注释掉了inlineblock，它没有改变居中。最外层div中的两个嵌套div需要（水平）相邻。如果没有inlineblock，我正要说，当我注释掉inline block时，2个嵌套的div将垂直堆叠。然而，我刚刚重新注释掉了内联块和gott-dang嵌套div，它们仍然在需要的地方并排水平。而gott dang red border div现在水平居中显示在页面上，shucks dang shimmy doo hah。谢谢我尝试了许多排列，但在添加边距之前我做了所有这些：0自动；从SO文章中。我希望是这样。@Andrew我正要给你和其他两个得到相同正确答案的人a+1，是你让我怀疑我的inlineblock并让我把它取出来的——当然希望你能把你的答案贴出来，这样我就可以接受了，我要感谢你和所有人的帮助。为什么它被设置为显示：inlineblock？-我注释掉了inlineblock，它没有改变中心。最外层div中的两个嵌套div需要（水平）相邻。如果没有inlineblock，我正要说，当我注释掉inline block时，2个嵌套的div将垂直堆叠。然而，我刚刚重新注释掉了内联块和gott-dang嵌套div，它们仍然在需要的地方并排水平。而gott dang red border div现在水平居中显示在页面上，shucks dang shimmy doo hah。谢谢我尝试了许多排列，但在添加边距之前我做了所有这些：0自动；从SO文章中。我希望是这样。@Andrew我正要给你和其他两个得到相同正确答案的人a+1，是你让我怀疑我的inlineblock，让我把它拿出来的——当然希望你能把你的答案贴出来，这样我就可以接受了，我要感谢你和所有人的帮助。