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;避免左默认填充/偏移：

＆＃13;

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

＆＃13;

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

＆＃13;

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，第二种方法是直接在我的HTML中键入HTML标记。

方法1（使用CSS）

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

就这么简单。 但请记住一件事，HTML5中不支持中心标记。在这种情况下，您必须使用CSS。
希望这有助于...
要详细了解中心标记：https://www.w3schools.com/tags/tag_center.asp

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

3 个答案: