Html 为什么边距：0自动未与中心对齐

有好几次我遇到这个问题。每当我尝试使用边距0自动居中时。 我有时成功，有时失败。所以我的问题是

为什么下面示例中的#PostWrapper没有在innerWrapper中居中

页边距：0自动工作的时间和不工作的时间。原因是什么

CSS:

HTML:

主题：

使用以下方法：

margin-left:auto;
margin-right:auto;

如果仍然有效，则添加以下内容：

text-align:center;

更新1：在chrome developer tools上检查你的样式时，我发现浏览器没有识别你的样式引用，所以问题可能出在你的项目选择上

更新2：试试这个-

 #container, #Post{

    background:#FFFFFF;
    border-radius:10px;
    margin-top:20px;
    overflow:auto;
}

#container, #Post, #InnerWrapper{
        margin:10px;
}

#container, #Post, #InnerWrapper, #SubjectWrapper{
    overflow:auto;
}

#container, #Post, #InnerWrapper, #SubjectWrapper, #SubjectText{
    font:30px "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-style:italic;
    font-weight:bold;
    float:left;
}

#container, #Post, #InnerWrapper, #SubjectWrapper, #SubjectBox{
        float:left;
        margin-left:2px;
}

#container, #Post, #InnerWrapper, #PostWrapper{
     margin-left:auto;
     margin-right:auto;
     border:3px solid #000;
     display:inline-block;
}

#container, #Post, #InnerWrapper, #PostWrapper, #PostText{
     font:30px "Palatino Linotype", "Book Antiqua", Palatino, serif;
     font-style:italic;
     font-weight:bold;
}

---

简而言之：它取决于元素的

位置

、

宽度

和

显示

属性。 尝试放置

位置：相对并设置其宽度

子div总是有100%的宽度，这使得居中无效，因此定义宽度和位置可以利用它。此外，您不能使用
display:inline block
，而是使用
display:block

编辑

下面是使用
margin:auto
的div代码示例：

这里是内部元素也是中心元素（我想这就是你想要的）：

这是整个过程的中心：
有两个原因：需要清除上面的浮动元素，并将其设置为显示：inline block；如果清除浮动并删除内联块，它将在中心对齐。您可以在此处查看：
问题在于选择器不明确，您提供的选择器链无效。只用

#PostWrapper{
     margin:0 auto;
     border:3px solid #000;
     display:inline-block;
}

根据我收集的信息，您可能希望在父容器div上设置宽度，因为如果没有设置宽度，则div的默认宽度为100%。显然，你不能“居中”一个占据100%屏幕的div，所以你应该尝试一下。
你的第一个建议毫无意义，因为它与OP使用的是相同的，你的第二个建议在语义上是错误的，因为它是针对text.IIRC的。除了需要文本对齐中心位的旧IE之外，自动边距在所有情况下都有效。文本对齐将标题对齐到中心，但不对齐文本区域。@joevallender这里没有浏览器问题。但它仍然不起作用对不起，ie6的评论相当多余；o） 嗯，我记得ie6有问题。不管怎么说，现在有了更好的答案……我们能期待一个详细说明原因的长篇<代码>版本吗？有很多关于这一点的文章，来自那些比我解释得更好的人。。。基本上，div总是有一个100%的宽度，这使得居中无效，所以定义宽度和位置可以利用它。@Shomz可以更具体一些吗。将“位置”属性放在上面的example@Mj1992向#postWrapper元素添加宽度和（可选）位置。。。您还必须使用
display:block
而不是
inline block
，它才能工作。。。如果您需要完整的代码，请告诉我。thnx Shomz。我无法计算出来。我认为代码选项会更好。它可以工作，只是没有设置任何宽度，所以postwrapper只是占用了所有InnerWrapper的宽度。此版本的innerwrapper上有一个bg颜色，postwrapper上有一个宽度。您是否仍在寻找
页边距：0自动工作的时间和不工作的时间的答案。原因是什么。
？被接受的答案未能解释这一点，我对此很感兴趣。
 #container, #Post{

    background:#FFFFFF;
    border-radius:10px;
    margin-top:20px;
    overflow:auto;
}

#container, #Post, #InnerWrapper{
        margin:10px;
}

#container, #Post, #InnerWrapper, #SubjectWrapper{
    overflow:auto;
}

#container, #Post, #InnerWrapper, #SubjectWrapper, #SubjectText{
    font:30px "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-style:italic;
    font-weight:bold;
    float:left;
}

#container, #Post, #InnerWrapper, #SubjectWrapper, #SubjectBox{
        float:left;
        margin-left:2px;
}

#container, #Post, #InnerWrapper, #PostWrapper{
     margin-left:auto;
     margin-right:auto;
     border:3px solid #000;
     display:inline-block;
}

#container, #Post, #InnerWrapper, #PostWrapper, #PostText{
     font:30px "Palatino Linotype", "Book Antiqua", Palatino, serif;
     font-style:italic;
     font-weight:bold;
}

#PostWrapper{
     margin:0 auto;
     border:3px solid #000;
     display:inline-block;
}