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

Question

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

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

代码片段：

.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" 添加到样式 sheet，但图标只是变小了，而不是向上移动了几个像素。

有什么建议或我应该研究的条款吗？

此致

Answer 1

Here 是一个很好的工具。

Answer 2

使用 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应该是唯一的标识符，并且只能在一个元素上使用。

Answer 3

简单的解决方案：

为.page-footer的class添加display: table的属性；

然后将您的图片标签包裹在 <div> 中，并将 display: table-cell 的属性分配给 div 以及 [=14] 的属性 =].

这样做会将 div 内的所有内容垂直对齐到元素的中间。

看这个JsFiddle我做的示范。

Answer 4

即使对于经验丰富的开发人员来说，也并不总是很明显。如果你只想在页脚中使用图片，你可以只做填充。另外，您在 <ul> 标签内缺少 <li>。这是一个例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .footer-list-item {
      list-style-type: none;
      display: inline-block;
    }

    .footer-list {
      padding: 50px 0;
      background: pink;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="footer">
    <ul class="footer-list">
      <li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li>
      <li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li>
      <li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li>
    </ul>
  </div>
</body>
</html>

JSBin link

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

Centering social media icons in footer of website

css

icons

footer