Question

我有几次遇到这个问题。每当我尝试使用保证金来中心时：0 auto。有时我会成功，有时候不会。所以我的问题是。

为什么以下示例中的#PostWrapper没有在innerWrapper中居中。
什么时候保证金：0自动起作用，何时不起作用。原因是什么。

CSS：

#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:0 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;
}

#container #Post #InnerWrapper #PostWrapper #PostBox{
}

HTML：

    <div id="Post">
     <div id="InnerWrapper">
    <div id="SubjectWrapper">
           <div id="SubjectText">Subject:</div>
               <div id="SubjectBox"><input type="text" class="text_box" /></div>
           </div>

        <div id="PostWrapper">
           <div id="PostText"><?php if($PageType=='and'){ echo 'Add new Deal:';}else{ echo 'Edit Company History:';}?></div>

           <div id="PostBox"><textarea rows="20" cols="103" id="PostEditor" /></div>
       </div>
    </div>

Answer 1

简而言之：它取决于元素的position，width和display属性。尝试将position: relative;添加到它们并设置它们的宽度。

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

修改

以下是使用margin: auto的div的代码示例：http://jsfiddle.net/vnAvk/

这里的内部元素也是中心（我认为这就是你所追求的）：http://jsfiddle.net/vnAvk/1/

这就是整个事情的中心：http://jsfiddle.net/vnAvk/2/

Answer 2

有两个原因：你需要清除它上面的浮动元素，并将它设置为显示：inline-block;如果清除浮子并移除内联块，它将在中心对齐。你可以在这里查看：http://jsfiddle.net/jalbertbowdenii/pQhjJ/1/

Answer 3

问题是模糊选择器，您提供的选择器链无效。只需使用

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

Demo

Answer 4

根据我收集的内容，您可能希望在父容器div上设置宽度，因为如果没有设置宽度，则div的默认值为100％。显然，你不能“占据”占据屏幕100％的div，所以这应该是你尝试的东西。

Answer 5

使用此：

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

如果它仍然有效，那就加上这个：

text-align:center;

更新1：嗯，在Chrome开发者工具上检查你的样式时，我看到浏览器没有识别你的样式，所以可能问题在于你的项目选择

更新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;
}

为什么保证金：0自动未对齐到中心

5 个答案:

Demo