我试图将图标放在我的页脚上

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;添加到页脚本身，将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>

Answer 2

您可以通过各种方法使元素居中。在您的情况下，将text-align: center;添加到.social-icons选择器将是最快的方法。

这是代码：

div.footer {
    width: 100%;
}

.social-icons {
    list-style-type: none;
    text-align: 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);
}

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

以下是完整的指南：Centering in CSS: A Complete Guide。

Answer 3

如果要将图标对齐到屏幕中心，则有两种方法可能。两者都完美无缺。第一种方法是使用CSS，第二种方法是直接在My HTML中键入HTML标记。

方法1（使用CSS）

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

以上是接受的答案的相同代码。这个实际上是有效的，通过添加一行来将页脚中的项目与中心对齐来对My CSS进行修改。

方法2（使用中心标记） 我很惊讶地看到没人提到HTML <center>标签。是的，只需将此标记添加到“我的HTML”即可将项目居中。

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

<div class="footer">
  <center>
        <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>
  </center>       
</div>

就这么简单。但请记住一件事，HTML5中不支持中心标记。在这种情况下，您必须使用CSS。 希望这可以帮助... 要了解有关中心标签的更多信息：https://www.w3schools.com/tags/tag_center.asp