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

添加“text-align：center;”在LIs上并在LIs内部建立链接“display：inline-block;”。

Answer 2

将以下内容添加到CSS中：

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

这会使链接和社交图标占据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; */
}

希望有所帮助

列表中的中心项（CSS）

4 个答案: