在另一个div中居多个div？

Question

我有四个div包含在另一个div中,我希望四个内部div居中.

我使用float: left了四个div,使它们水平对齐.

CSS:

<style>
    .square  //inner divs
    {
        float: left;
        margin:1pt;
        width:72pt;
        height:72pt;
    }
    .container //outer divs
    {
        text-align:center;
        width:450pt;
        height: 80pt;
    }
</style>

和HTML:

<div class = "container">
    <div class = "square">...</div>
    <div class = "square">...</div>
    <div class = "square">...</div>
    <div class = "square">...</div>
</div>

如何将div放在容器内？

内部div的数量可以是变量.

Answer 1

因为你不知道你拥有的div的数量,你应该使用

text-align:center 在外部div

display:inline-block 然后在内部div

http://jsfiddle.net/edi9999/yv2WY/

HTML

<div class = "container">
    <div class = "square">John</div>
    <div class = "square">Mary</div>
    <div class = "square">Doe</div>
    <div class = "square">Jane</div>
</div>

CSS

.square
{
    margin:1px;
    width:20%;
    text-align:left;
    border: 1px solid gray;
    display:inline-block;    
}
.container
{
    text-align:center;
    width:100%;
    height: 80pt;
    border: 1px solid black;
}

Answer 2

如果你可以使用额外的div,这是另一种方法:

<div class = "container">
  <div class="centerwrapper">
    <div class = "square">...</div>
    <div class = "square">...</div>
    <div class = "square">...</div>
    <div class = "square">...</div>
  </div>
</div>

<style>
    .square
    {
        float: left;
        margin:1pt;
        width:72pt;
        height:72pt;
    }
    .container
    {
        text-align:center;
        width:450pt;
        height: 80pt;
    }
    .centerwrapper
    {
       margin: auto;
       width: 302pt;
    }
</style>

另外,请确保在<div class = "container">那里有一个结束报价.您粘贴的代码缺少一个.

Answer 3

而不是浮动.square div,给它们display: inline-block.这可能在Firefox 3.0.x中很狡猾,但我相信在3.5.x中完全支持inline-block.

Answer 4

正如#RwL所说,使用<span>作品,这里是一个示例代码,在IE6/8,Chrome,Safari,Firefox上进行了测试:

CSS

<style type="text/css">
    /* borders and width are optional, just added to improve visualization */
    .parent
    {
        text-align:center;
        display: block;
        border: 1px solid red;
    }
    .child
    {
        display: inline-block;
        border: 1px solid black;
        width: 100px;
    }
</style>

HTML

<span class="parent">
    <span class="child">
        A
    </span>
    <span class="child">
        B
    </span>
</span> 

Answer 5

当您有一个动态div中心时，我可以找到的最优雅的解决方案是 text-align: center;在父div和子div display: inline-block;上使用。

这一切都在这里详细解释。