2

有几次我遇到了这个问题。每当我尝试使用 margin:0 auto 将某些东西居中时。有时我成功，有时没有。所以我的问题是。

  1. 为什么下面示例中的#PostWrapper 没有在 innerWrapper 中居中。
  2. margin:0 auto 什么时候起作用，什么时候不起作用。原因是什么。

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>

4

5 回答 5

1

根据我收集的信息，您可能希望在父容器 div 上设置宽度，因为如果没有设置宽度，则 div 的默认值为 100%。显然，您不能“居中”占据 100% 屏幕的 div，因此您应该尝试这样做。

于 2012-04-28T15:52:47.643 回答
1

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

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

编辑

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

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

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

于 2012-04-28T15:16:44.593 回答
1

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

于 2012-04-28T15:38:22.677 回答
1

问题是选择器不明确，您提供的选择器链无效。只需使用

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

演示

于 2012-04-28T15:44:32.257 回答
-2

用这个：

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;
}
于 2012-04-28T15:14:39.863 回答