Html 如何使ul列表集中在div中

我在这里创作了一把小提琴：

如何使ul中包含的四个白色框在红色条内水平居中？我已经尝试了很多方法，但我就是想不出来。我已经准备好了很多关于这个话题的帖子，并且尝试了很多以前被建议过的事情，没有一件是我可以在我的特定问题上工作的。我错过了什么

页脚{
宽度：100%；
位置：相对位置；
背景色：#C5C5；
显示：块；
溢出：隐藏；
}
页脚部分#页脚内容{
最大宽度：1440px；
最小高度：50px；
保证金：30像素自动；
填充：0.694444%；
/*10px/1440px*/
位置：相对位置；
显示：块；
溢出：隐藏；
}
页脚#社交{
高度：30px；
保证金：0自动；
背景色：红色；
宽度：600px；
位置：相对位置；
}
页脚#社会保险{
列表样式：无；
宽度：100%；
利润率：0.50%；
}
页脚#社交李{
浮动：左；
边缘：0.3em；
位置：相对位置；
显示：块；
宽度：30px；
高度：30px；
溢出：隐藏；
}
页脚#社会a{
文字装饰：无；
颜色：#CC7D29；
背景：#ffffff；
显示：块；
文本对齐：居中；
高度：30px；
}

删除

上的边距，并将其替换为

文本对齐：居中和
填充：0。在列表项上，移除浮动和填充，并将显示更改为
内联块


页脚{
宽度：100%；
位置：相对位置；
背景色：#C5C5；
显示：块；
溢出：隐藏；
}
页脚部分#页脚内容{
最大宽度：1440px；
最小高度：50px；
保证金：30像素自动；
填充：0.694444%；
/*10px/1440px*/
位置：相对位置；
显示：块；
溢出：隐藏；
}
页脚#社交{
高度：30px；
保证金：0自动；
背景色：红色；
宽度：600px；
位置：相对位置；
}
页脚#社会保险{
列表样式：无；
宽度：100%；
xmargin:0.50%；
文本对齐：居中；
填充：0；
}
页脚#社交李{
xfloat：左；
边缘：0.3em；
位置：相对位置；
显示：内联块；
宽度：30px；
高度：30px；
溢出：隐藏；
}
页脚#社会a{
文字装饰：无；
颜色：#CC7D29；
背景：#ffffff；
显示：块；
文本对齐：居中；
高度：30px；
}











的公认答案可能会有所帮助。我在发布此文章之前已彻底阅读了这些答案，但没有一个我可以着手解决我的特定问题。当然，我遗漏了一些东西，我只是不知道那是什么，这就是为什么我张贴。谢谢。非常感谢你，这很有效！