Question

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

我在四个div上使用float: left，以便它们水平对齐。

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数量，所以您应该使用

外部div上的

text-align:center

display:inline-block on the inner 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到中心时，我能找到的最优雅的解决方案是使用父div上为text-align: center;，孩子为display: inline-block;。

详细解释了here。

Answer 6

只需将margin:auto;放在主包装内text-align:center;内的所有后续div中。应该把所有的孩子div分配到父div的中心吗？

Answer 7

enter link description here

自动居中的所有HTML元素

此代码将在Center中的所有HTML元素上应用，而无需任何@mediaquery。

HTML元素自动居中的主要css属性显示chide div的内联块并添加父div的css属性text-align中心

.center {
            border: 1px groove;
            width: 97px;
            border-radius: 7px;
            padding: 10px;
            width: 122px;
            margin-left: 12px;
            margin-top: 13px;
            display: inline-block;
            text-decoration: none;

            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 1.2em;
            color: #000000;
            background: #dbdbdb;
        }

<div style="width: auto;text-align: center;">

            <div class="center">Div1</div>
            <div class="center">Div2</div>
            <div class="center">Div3</div>
            <div class="center">Div4</div>
            <div class="center">Div5</div>
            <div class="center">Div6</div>
            <div class="center">Div7</div>

    </div>

see this example click here

在另一个div中居多个div？

7 个答案:

自动居中的所有HTML元素