html - 我试图将图标放在页脚的中心

Question

我试图将图标列表置于页脚的中央。我尝试了多种方法，但出于某种原因，结果并不是我想要的。

我的 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>

Answer 1

将 text-align: center; 添加到页脚本身，将 apple display: inline-block 添加到 ul (以减少其宽度到实际内容，从而使居中成为可能)以及 padding: 0; 以避免左侧默认填充/偏移:

.footer {
  text-align: center;
}
.social-icons {
  list-style-type: none;
  display: inline-block;
  padding: 0;
}

.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);
}

<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>