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

【问题标题】：Center multiple divs inside another div在另一个 div 中居中多个 div
【发布时间】：2014-02-06 14:32:05
【问题描述】：

我试图将 4 个 div 居中在一个更大的 div 中，它们之间的边距相等，但这似乎不起作用。我查看了其他答案并尝试了 margin: 0 auto 但它对我不起作用。这是 HTML：

        <div id="footer_frame">
        <a href="mailto: ###" target="_blank" id="email_address">mail@gmail.com</a>
        <span id="phone">044-1234567</span>
        <div id="footer_icons">
            <div class="icon_div">
                <img src="images/youtube.png" alt="Watch our work at our YouTube page" class="icon" />
                <p>YouTube</p>
            </div>
            <div class="icon_div">
                <img src="images/email.png" alt="Contact us" class="icon" />
                <p>Email</p>
            </div>
            <div class="icon_div">
                <img src="images/googleplus.png" alt="Join our circle @ Google+" class="icon" />
                <p>Google+</p>
            </div>
            <div class="icon_div">
                <img src="images/facebook.png" alt="Join our Facebook page" class="icon" />
                <p>Facebook</p>
            </div> 
       </div>

还有 CSS：

    #footer_frame {
    position: absolute;
    background-color: rgba(0,0,0,0.8);
    width: 25%;
    height: 16%;
    top: 83%;
    left: 37.5%;
    }

    #footer_icons {
        width: 90%;
        clear:both;
        margin-top:12%;
    }

        #footer_icons .icon_div {
            display: inline-block;
            text-align: center;
            font-size: 0.9em;
            color: white;
        }

            #footer_icons .icon_div p {
                margin: 0.2em;
            }

现在看起来像这样，但我想要的是 4 个图标将在黑色 div 内居中。

谢谢。

【问题讨论】：

www.getbootstrap.com 啊，非常好的格式化样式，包括让事物等距排列。

标签： css html centering

【解决方案1】：

用一个 DIV 包装所有四个内部 div，然后设置一个固定的width 并在那个上使用margin: 0 auto。

【讨论】：

它们已经在一个 div 中（
）。我试着给它 margin: 0 auto ，但它不起作用。也许它与它的位置有关：绝对？
将margin: 0 auto 分配给#footer_icons div，因为这是您要在页脚中居中的DIV

【解决方案2】：

当我做这样的事情时，我会尽可能多地使用弹性盒子。上面的答案完美无缺，但我只是想您可能想尝试这两个选项。

#footerIcons{ display: inline-flex;}   .iconDiv{ display: -webkit-flexbox;   
-webkit-flex-pack: center;
-webkit-flex-align: center;

}

这应该可行。欲了解更多信息，请访问this 链接。在您尝试在代码中使用 flexbox 之前，请确保您拥有所有正确的供应商前缀。

【讨论】：