Question

我有一个包装器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。

Answer 2

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

Answer 3

据我所知，如果无法确定元素的宽度，则无法使用margin：auto方法。它不是很优雅，但您可以使用居中的表格完成此任务：

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

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

Answer 4

你可以使用jquery将div放在中心位置，这可能是......

<script type="text/javascript">

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

然后你应该完成余下的CSS设置。

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

将div中未知宽度的div居中

4 个答案: