Html I'；我试着把我页脚上的图标居中

我正在尝试在页脚中居中显示图标列表。我尝试了很多东西，但由于某些原因，结果并不是我想要的

我的CSS：

.social-icons {
  list-style-type: none;
  width: 100%;
}

.social-icons ul {
  align-items: center;
}

.social-icons li {
  display: inline;
}

.social-icons li img {
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  margin-top: 20px;
  padding: 0 10px;
}

.social-icons li img:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

我的HTML：

<div class="footer">
        <ul class="social-icons">
          <li><img src="images/discordicon.png" alt="Discord Icon"></li>
          <li><img src="images/skypeicon.png" alt="Skype Icon"></li>
        </ul>
      </div>

添加

文本对齐：居中

到页脚本身，apple

显示：内联块

到

ul

（将其宽度减小到实际内容，从而使居中成为可能）以及

填充：0要避免左默认填充/偏移，请执行以下操作：


.footer{
文本对齐：居中；
}
.社会偶像{
列表样式类型：无；
显示：内联块；
填充：0；
}
.社会偶像李{
显示：内联；
}
.社会偶像李img{
-moz转换：全部为0.3s；
-webkit转换：所有0.3；
过渡：均为0.3秒；
边缘顶部：20px；
填充：0 10px；
}
.社交图标li img:悬停{
-moz变换：比例（1.1）；
-webkit转换：比例（1.1）；
转换：比例（1.1）；
}





您可以通过多种方法将元素居中。在您的情况下，添加
文本对齐：居中到
。社交图标
选择器将是最快的方式

代码如下：


div.footer{
宽度：100%；
}
.社会偶像{
列表样式类型：无；
文本对齐：居中；
}
.社会偶像李{
显示：内联；
}
.社会偶像李img{
-moz转换：全部为0.3s；
-webkit转换：所有0.3；
过渡：均为0.3秒；
边缘顶部：20px；
填充：0 10px；
}
.社交图标li img:悬停{
-moz变换：比例（1.1）；
-webkit转换：比例（1.1）；
转换：比例（1.1）；
}





如果要将图标与屏幕中心对齐，有两种可能的方法。两者都能完美地工作。第一种方法是使用CSS，第二种方法是直接在我的HTML中键入HTML标记

方法1（使用CSS）


.footer{
文本对齐：居中；
}
.社会偶像{
列表样式类型：无；
显示：内联块；
填充：0；
}
.社会偶像李{
显示：内联；
}
.社会偶像李img{
-moz转换：全部为0.3s；
-webkit转换：所有0.3；
过渡：均为0.3秒；
边缘顶部：20px；
填充：0 10px；
}
.社交图标li img:悬停{
-moz变换：比例（1.1）；
-webkit转换：比例（1.1）；
转换：比例（1.1）；
}





从
中删除
ul
。社交图标ul
@michaelocker没有做任何事情对齐：居中已过时，请使用文本：对齐：居中@哦，使用
文本对齐：居中
，而不是
对齐项目：居中
。
align items
属性用于
flex
布局。感谢大家的帮助！不知什么原因，我的定心好像有点不对劲@乔丹·弗利特伍德（Jordanfeetwood）在照片上看起来还行，只是页脚栏距底部约2倍或3倍。你可以分享完整的源代码，告诉我们你遇到了什么问题，我们很乐意提供帮助。我想我已经解决了这个问题。然而，我该如何做才能避免每次我想给页脚添加新内容时都要更改一大堆内容？@Jordanfeetwood如果你是指我提到的2px边距，那么你需要将页脚位置设置为固定或绝对，并将其设置为底部：0；空白：0；这应该能奏效。其他需要考虑的因素可能需要组织。因此，每当你添加或更改某些内容时，所有内容都应该就位。我在另一个答案下面的评论中看到了你链接的图像：可能是默认的左填充（请参见上面的答案）@Johnannes实际上我现在有另一个问题。我试着在我的页脚上添加另一个元素，它奇怪地改变了一切？