css - 将社交媒体图标置于网站页脚的中心

Question

我对 CSS 和 HTML 的世界相当陌生，所以我先向您道歉。

我在让我的社交媒体图标在我的网站底部居中时遇到问题。 他们坐得很重，而不是在页脚的中间。 附件是问题的屏幕截图及其背后的代码。

Image of current footer

---

代码片段:

.page-footer {
  background-color: #F06D71;
  padding: 1em;
}

<footer class="page-footer">
  <ul>
    <img class="responsive-img" src="http://placehold.it/50x50">
    <img class="responsive-img" src="http://placehold.it/50x50">
    <img class="responsive-img" src="http://placehold.it/50x50">
  </ul>
</footer>

我试图在样式表中添加“padding-bottom”，但图标只是变小了，而不是向上移动了几个像素。

我应该研究的任何建议或任何条款？

问候

Answer 1

使用 Flexbox:

.page-footer{
 display:flex;
}

.page-footer ul{
 align-items:center;
}

这将使图标在页脚内垂直居中。您还应该将图像包裹在 <li> 中列表中的标签作为列表项。如果你还想很好地使它们垂直居中，你可以添加 display: inline-block 到列表元素和 text-align center 到它的父元素，无序列表。所以最终的代码是:

.page-footer{
  display:flex;
}

.page-footer ul{
  justify-content:center;
  text-align:center;
}

.page-footer ul li{
  display:inline-block;
 }

我还注意到一件事，您为所有三张图片添加了相同的 ID。 ID 应该是唯一的标识符，并且只能在一个元素上使用。