Html 在另一个div中居中包含多个图像的div

我在尝试将包含四个联系人图像的div置于另一个div的中心时遇到问题。以下是我的HTML代码：

<div id="contact" class="infoSection">
    <div id="centeredConctact">
        <!--<img class="contactImg" src="images/email.png" alt="Email"></img>-->
        <a href="" rel="noopener noreferrer"><img class="contactImg" src="images/facebook.png" alt="Facebook"></img></a>
        <a href="" rel="noopener noreferrer"><img class="contactImg" src="images/instagram.png" alt="Instagram"></img></a>
        <a href="" rel="noopener noreferrer"><img class="contactImg" src="images/twitter.png" alt="Twitter"></img></a>
        <a href="" rel="noopener noreferrer"><img class="contactImg" src="images/snapchat.png" alt="Snapchat"></img></a>
    </div>
</div>

---

我能做些什么来解决这个问题？谢谢。

尝试使用类似以下的Flashbox布局：

div#联系人{
边框：1px纯红；
显示器：flex；
调整内容：中心
}
联系{
宽度：50px；
高度：50px；
利润率：3×1×0；
}
新闻组{
边缘顶部：15px；
填充：0；
宽度：60%；
最小宽度：600px；
}

---

如果这不是您想要实现的目标，请告诉我。你的问题有点含糊，但这是我从中得出的结论

div#联系人{
边框：1px纯红；
宽度：100%；
}
div#centeredcontact{
文本对齐：居中；
}
联系{
宽度：50px；
高度：50px；
显示：内联块；
保证金：4px 1px 1px；
}
a、 联系{
文字装饰：无；
}
新闻组{
边缘顶部：15px；
填充：0；
}

---

div已经居中

使用

文本algin:Center

将图像（分别链接）居中

div#联系人{
边框：1px纯红；
}
div#centeredcontact{
保证金：0自动；
宽度：50%；
边框：1px实心；
文本对齐：居中；
}
联系{
宽度：50px；
高度：50px；
显示：内联块；
}
新闻组{
边缘顶部：15px；
填充：0；
宽度：60%；
最小宽度：600px；
}

可能与第一个重复您需要更正代码。。我们不使用像这样的图像标签请再读一遍问题：）这不是说是否有需要。。。OP说：把一个div放在一个div的中间，这样通过移除这个div，你就得到了一个完全新的代码，与这个div无关OP@TemaniAfif你是对的，我错了。我已经更新了答案。这起作用了，我真的希望HTML更加一致，不要期望我们使用文本对齐来居中显示图像。谢谢。@George您不必关闭图像标签。像

那样使用它。我从副本中漏掉了它@George只需从代码中删除

。

div#contact {
    border: 1px solid red;
}

div#centeredConctact {
    margin: 0 auto;
    width: 50%;
}

img.contactImg {
    width:50px;
    height:50px;
    display: inline-block;
    margin: 0 auto;
}

div.infoSection {
    margin-top: 15px;
    padding: 0;
    width: 60%;
    min-width: 600px;
}