居中列表中的项目 (CSS)

Question

我需要将项目居中显示在我的社交媒体菜单列表（侧边栏标题下的 4 个图标）上。我必须使它们均匀分布（每个项目宽度为 25%，因为我有 4 个），"ul"显示为表格。但是，每个"li"内的图标都粘在左边！有什么想法吗？谢谢！

http://www.blogderod.com/

.social-navigation {
margin: 0 15% 10%;
display: table;
width: 70%;
}
.social-navigation li {
display: inline-block;
text-align: center;
float: none;
width: 25%;
}

Answer 1

将以下内容添加到您的 CSS 中：

.social-navigation a,
.social-navigation a:before {
    width: 100%;
}

这使得链接和社交图标都占据了li的整个宽度，使它们都正确居中。

Answer 2

在 LI 上添加"文本对齐：居中;"，并使 LI 中的链接"显示：内联块;"。

Answer 3

像这样编辑这个类：

.social-navigation a:before {
content: "f415";
font-size: 24px;
position: absolute;
top: 0;
left: 20px;

根据需要更改顶部/左侧位置。

Answer 4

在 CSS 中进行此更改

media="all"
.social-navigation a:before {
content: "f415";
font-size: 24px;
/* position: absolute; */
/* top: 0; */
/* left: 0; */
}

希望有帮助