在另一个div中居中多个div？答案

【问题标题】：Center multiple divs in another div?在另一个div中居中多个div？
【发布时间】：2019-10-17 20:27:56
【问题描述】：

我有四个 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 的数量可以是可变的。

【问题讨论】：

切向：类、等号和引用值之间有空格不会导致任何问题吗？

标签： html css

【解决方案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;
}

【讨论】：

jsfiddle 的略微更新版本（您最初在容器上也有 inline-block，这不是必需的）：jsfiddle.net/yv2WY/34

【解决方案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"> 上有一个结束语。您粘贴的代码缺少一个。

【讨论】：

这适用于 4 个 div，但容器中 div 的数量可能并不总是相同。就我而言，有时可能只出现 2 或 3 个 div，我也希望它们居中。我忘了在我的问题中说明这一点......
嗯。如果您可以在给定宽度内显示正方形而不是浮动它们，那可能会更好。如果可以使用边距：自动；在周围的 div 中，那么它们将始终居中 - 诀窍是远离指定它的宽度。
好的，我设法通过像这样定义 centerwrapper 的宽度来使其工作，而不是使用 css 类：
如果没有.centerwrapper 的宽度，您将如何做到这一点。如，您有一个动态数组 .squares
这对我帮助很大。我在水平对齐 div 以实现跨浏览器兼容性时遇到了最困难的情况，但它最终变得非常简单。我所要做的就是遵循与上面相同的 div 结构，在容器中指定 width 和 display:block 属性，然后对于每个子 div，给它一个宽度百分比，将它浮动到左边，我很高兴去.谢谢！

【解决方案3】：

正如#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>

【讨论】：

但是，如果您需要在里面添加 UL 列表，这将使其不符合 CSS，因为 SPAN 中不允许使用 UL。在这种情况下，您可以使用条件语句并为 IE6 应用 SPAN（它不再是标准的，因为这个不能更“不标准”！），并为其他应用 DIV。
另外，parent 可以是 DIV，只有 child 需要是 SPAN，这样 IE6 才能检测到 inline-block 属性。

【解决方案4】：

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

【讨论】：

我相信你也需要为 IE6/7 设置一个特殊规则。
啊哈——我忘记了 IE6 和 7 只支持最初内联的元素上的内联块......所以你必须将 .square div 更改为跨度才能工作。对不起。
通过一些额外的 CSS，您可以在不更改标记的情况下实现这一点。这是我在 IE6+ 和所有其他现代浏览器上使用的代码（感谢其他几个）： .inline-block { display: -moz-inline-box; -moz-box-orient：垂直；显示：内联块；垂直对齐：中间； #显示：内联； /* 修复 IE6 上与本机输入/按钮的对齐 */ #vertical-align: auto;如果你像我一样不喜欢 hack，你可以取出最后两个属性并将它们移动到由条件 cmets 调用的 IE 样式表中（并删除哈希标签）。

【解决方案5】：

当你有一个动态数量的 div 居中时，我能找到的最优雅的解决方案是使用 text-align: center; 在父 div 上，display: inline-block; 在子 div 上。

都在详细解释here。

【讨论】：

【解决方案6】：

只需将margin:auto; 放置在您的主包装器中，即text-align:center; 中。我认为应该将所有子 div 对齐到父 div 的中心吗？

【讨论】：

除此之外，如果您需要在每个子 div 的顶部/底部设置间距，您可以使用：margin: 5px auto 5px auto;边距的顺序为：左上右下；

【解决方案7】：

enter link description here

自动居中的多合一 HTML 元素

此代码适用于 Center 中的所有 HTML 元素，没有任何 @mediaquery。

html元素自动居中主css属性显示chide div的inline-block并添加css属性text-align center of parent div

.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

【讨论】：