Html 在另一个分区中居中放置多个分区？

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

我在四个div上使用了

float:left

，以便它们水平对齐

CSS:

.square//内分区
{
浮动：左；
保证金：1吨；
宽度：72磅；
高度：72磅；
}
.容器//外部分区
{
文本对齐：居中；
宽度：450磅；
高度：80磅；
}

和HTML：

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

...
...
...
...

如何将div置于容器内的中心

---

内部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>

...
...
...
...
广场
{
浮动：左；
保证金：1吨；
宽度：72磅；
高度：72磅；
}
.集装箱
{
文本对齐：居中；
宽度：450磅；
高度：80磅；
}
.centerwrapper
{
保证金：自动；
宽度：302pt；
}

---

另外，请确保您的

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

不要浮动.square div，而是给它们

显示：内联块。

这在Firefox 3.0.x中可能不可靠，但我相信内联块在3.5.x中是完全受支持的。

正如RwL所说，使用

可以工作的，这里是一个示例代码，在IE6/8、Chrome、Safari、Firefox上测试过：

CSS

/*边框和宽度是可选的，只是为了提高可视化效果而添加的*/
父母亲
{
文本对齐：居中；
显示：块；
边框：1px纯红；
}
小孩
{
显示：内联块；
边框：1px纯黑；
宽度：100px；
}

HTML

A.
B

---

只需放置

页边距：自动用于主包装中的所有后续div，即
文本对齐：居中。我认为应该将所有的子div都对齐到父div的中心吗？
当您有一个动态的div数到中心时，我能找到的最优雅的解决方案是使用
文本对齐：居中和
显示：内联块在孩子们身上

所有这些都有详细的解释。
因为您不知道自己有多少个div，所以应该使用

文本对齐：在外部div上居中

显示：内联块
在内部div上


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>


auto center中的一体式HTML元素
此代码应用于中心的所有HTML元素，而不使用任何@mediaquery


HTML元素auto center主css属性显示chide div的内联块，并添加css属性文本对齐父div的中心


.center{
边框：1px凹槽；
宽度：97px；
边界半径：7px；
填充：10px；
宽度：122px；
左边距：12px；
边缘顶端：13px；
显示：内联块；
文字装饰：无；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
字体大小：1.2米；
颜色：#000000；
背景：#dbdb；
}


第一组
第二组
第三组
第四组
第五组
第六组
第7课

Tangential：类、等号和引号之间有空格不会引起任何问题吗？我相信你也需要为IE6/7加入一个特殊规则。啊哈——我忘记了IE6和IE7只支持最初内联的元素上的内联块。。。因此，您必须将.square div更改为跨距，这样才能工作。抱歉，使用一些额外的CSS，您可以在不更改标记的情况下实现这一点。以下是我在IE6+和所有其他现代浏览器上使用的代码（多亏了其他几个）：内联块{display:-moz-inline-box；-moz-box-orient:vertical；display:inline-block；vertical-align:middle；#display:inline；/*修复了IE6上本机输入/按钮的对齐*/#垂直对齐：auto；}如果你像我一样，不喜欢黑客，你可以把最后两个属性去掉，并将它们移动到由条件注释调用的IE样式表中（并删除散列标记）。这对4个div有效，但容器中的div数可能并不总是相同的。在我的例子中，有时只会出现2或3个div，我希望它们也居中。我忘了在我的问题中说明这个…嗯。如果你能以一个给定的宽度显示你的方块，而不是让它们浮动，这可能会更好。如果可以使用边距：自动；在一个周围的div中，它们将始终居中-诀窍是不要指定它的宽度。好的，我通过这样定义centerwrapper的宽度而不是使用css类来实现它：如果没有
.centerwrapper
的宽度，您将如何做到这一点。就像在中一样，您有一个动态的
.squares
数组，这对我帮助很大。为了实现跨浏览器兼容性，我在水平对齐div时遇到了最困难的情况，结果非常简单。我所要做的就是遵循与上面相同的div结构，在容器中指定width和display:block属性，然后对于每个子div，给它一个width百分比，将它浮动到左侧，我就可以开始了。非常感谢。然而，如果您需要在内部添加UL列表，这将使其不符合CSS，因为在SPAN中不允许使用UL。在这种情况下，您可以使用条件并为IE6应用SPAN（它已经不是标准的了，因为它已经不是标准的！），为其他应用DIV。此外，父级可以是DIV，只有子级需要是SPAN，这样IE6才能检测内联块属性。除此之外，如果需要每个子div的顶部/底部的间距，可以使用：margin:5px auto 5px auto；T
<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>

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

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

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