在另一个div中居中多个div

Question

我试图将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内居中。

感谢。

Answer 1

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

Answer 2

当我做这样的事情时，我会尝试尽可能多地使用flexbox。上面的答案很有效，但我只是觉得你可能想尝试这两个选项。

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

}

这应该有效。有关详细信息，请访问this链接。在您尝试在代码中使用flexbox之前，请确保您拥有正确的供应商前缀。