列表中的居中项目 (CSS)

Question

我需要将 social-media 菜单列表中的项目居中（边栏标题下的 4 个图标）。我必须让它们均匀分布（每个项目宽度为 25%，因为我有 4 个），"ul" 显示为 table。但是，每个 "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

在 LI 上添加 "text-align: center;" 并在 LI 中创建链接 "display: inline-block;"。

Answer 2

像这样编辑class：

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

根据需要更改 top/left 位置。

Answer 3

在您的 CSS

中进行此更改

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

希望对您有所帮助

Answer 4

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

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

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

列表中的居中项目 (CSS)

Center items in list (CSS)

css

wordpress

wordpress-theming

html-lists