Html CSS水平对齐问题

我有一个名为“连接”的div。里面有一个标题，下面是另一个div，里面有一个CSS精灵

我很难让CSS精灵在标题下对齐，即使我将#connect div设置为text align:center

这是我的HTML：

<div id="connect">
    Connect with us
        <div id="social-icons">
            <a class="facebook" target="_blank" href="#"></a>
            <a class="youtube" target="_blank" href="#"></a>
            <a class="twitter" target="_blank" href="#"></a>
            <a class="instagram" target="_blank" href="#"></a>
        </div>
</div>

---

这是我的小提琴：

您需要

显示：内联块

用于图标的文本对齐。还需要换行。请看下面的小提琴：

---

一个简单的解决方案是修改css的这一部分，如下所示：

div#social-icons{
    margin:0 auto 50px auto;
    display:block;
    width:200px;
}

将左边距和右边距设置为“自动”，并给它们设置宽度，强制它们在父元素中居中

---

我必须等4分钟才能这样做。但我肯定会的。

div#social-icons{
    margin:0 auto 50px auto;
    display:block;
    width:200px;
}