3

我有一个包装器 div 元素，其中包含一个 div，而该 div 又包含内部的 div；这些 div 在运行时添加或删除。HTML 和 CSS 如下所示：

​<div id="Wrapper">
   <div class="InnerGreen">
       <div class="InnerContent"></div>
       <div class="InnerContent"></div>
   </div>    
</div>

​#Wrapper{
     width:600px;
     height:50px;  
     margin:10px 20px;    
     background:blue;}

.InnerGreen{
     background:green;
     margin:10px auto; // this doesn't center
     overflow:hidden;
     display:inline-block;}

.InnerContent{
     background:yellow;
     height:30px;
     width:40px;
     float:left;
     margin:3px 5px;}

我inline-block用来包裹.InnerGreen里面Wrapper; 但是，margin:auto似乎并没有将 div 水平居中。当然，如果我定义了宽度，这可行，.InnerGreen但实际上，.InnerContentdiv 是所有不同大小的 div 的集合，因此我无法.InnerGreen在运行时设置宽度。

我怎样才能完成这项margin:auto工作？这里是jsfiddle。

感谢您的建议。

4

4 回答 4

7

内联元素没有边距。通过告诉.InnerGreen充当inline-block，您实际上是在告诉它在定位方面充当内联。另一方面，您仍然可以使用 text-align 将其居中：

#Wrapper {
    text-align: center;
}

请参阅更新的 JSFiddle。

于 2012-08-29T18:01:21.513 回答
2

从技术上讲，这可能不是正确的方法，但您可以放在text-align:center包装器 div 上。

于 2012-08-29T18:01:35.370 回答
0

据我所知，如果无法确定元素的宽度，则不能使用 margin:auto 方法。它并不完全优雅，但您可以使用居中的表格完成此操作：

<center>
   <table>
    <tr><td align="center">
       <div>This will be centered.</div>
    </td></tr>
   </table>
</center>

使用您的代码：http: //jsfiddle.net/MaxPRafferty/yA7Nm/

于 2012-08-29T18:12:50.650 回答
0

您可以使用 jquery 将 div 居中，类似于...

<script type="text/javascript">

    $(function() {
        var containerWidth = $(".InnerGreen").width();
        $(".InnerGreen).css("width", containerWidth);
    });
</script>

然后，您的边距 CSS 设置应该完成其余的工作。

您可能还想为您的样式添加 height:auto ，就像您在运行时添加内部内容一样，它将更好地控制元素的增长。

于 2012-08-29T18:13:03.490 回答