css - 在另一个 div 中居中多个 div

Question

我试图将 4 个 div 居中放在一个更大的 div 中，并且它们之间的边距相等，但它似乎不起作用。我查看了其他答案并尝试了 ma​​rgin: 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。