在另一个div中居多个div？

I have four divs contained in another div, and I want the four inner divs to be centered.

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

I have used float: left on the four divs so that they are horizontally aligned.

我使用了float：在四个div上左侧，使它们水平对齐。

CSS:

CSS：

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

and HTML:

和HTML：

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

How can I center the divs inside the container?

如何将div放在容器内？

The number of inner divs can be variable.

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

6 个解决方案

#1

Here's an alternate method if you can use an extra div:

如果您可以使用额外的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>

Also, make sure you have a closing quote on your <div class = "container"> there. The code you pasted is missing one.

另外，请确保在

上有结束报价。您粘贴的代码缺少一个。

#2

Because you don't know the number of divs you have, you should use

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

text-align:center on the outer div

text-align：外部div的中心

display:inline-block on then inner div

display：inline-block on then inner div

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

HTML

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

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;
}

#3

Instead of floating the .square divs, give them display: inline-block. This might be dodgy in Firefox 3.0.x but I believe inline-block is fully supported in 3.5.x.

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

#4

As #RwL say, using <span> works, here a sample code, tested on IE6/8, Chrome, Safari, Firefox:

正如#RwL所说，使用工作，这里有一个示例代码，在IE6 / 8，Chrome，Safari，Firefox上测试：

CSS

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

HTML

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

#5

Most elegant solution I could find when you have a dynamic number of div to center is to use text-align: center; on the parent div, and display: inline-block; on the children.

当你有一个动态数量的div到中心时我能找到的最优雅的解决方案是使用text-align：center;在父div上，并显示：inline-block;对孩子们。

It's all explained in details here.

这里都详细解释了这一点。

#6

Simply place margin:auto; for all subsequent divs inside your main wrapper that is text-align:center;. SHOULD allign all child divs to the center of the parent div i think?

只需放置保证金：auto;对于主包装器中的所有后续div，即text-align：center;。我认为应该将所有儿童div分配给父母div的中心？

#1