html - 将未知宽度的 div 在 div 中居中

Question

我有一个包装器 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 的宽度，这会起作用，但实际上，.InnerContent div 是所有不同大小的 div 的集合，所以我无法设置.InnerGreen 在运行时的宽度。

如何让 margin:auto 起作用？这里是jsfiddle .

感谢您的建议。

Answer 1

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

#Wrapper {
    text-align: center;
}

参见 updated JSFiddle .