在网站页脚居中社交媒体图标答案

【问题标题】：Centering social media icons in footer of website在网站页脚居中社交媒体图标
【发布时间】：2016-09-05 21:35:57
【问题描述】：

我对 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”，但图标只是变得更小而不是向上移动几个像素。

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

问候

【问题讨论】：

"align: center" 不适合你？
已弃用，您使用 tex-align:center;现在
你应该在你的问题中写你的代码，而不是它的图像。
我尝试帮助您创建代码 sn-p，请使用您的 css 修改它以使其尽可能精确。

标签： css icons footer

【解决方案1】：

使用弹性盒：

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

【讨论】：

【解决方案2】：

Here 是一个很好的工具。

【讨论】：

【解决方案3】：

简单的解决方案：

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

然后将您的图像标签包装在 <div> 中，并将 display: table-cell 的属性分配给 div 以及 vertical-align: middle; 的属性。

这样做会将该 div 内的任何内容垂直对齐到元素的中间。

请参阅我作为演示制作的 JsFiddle。

【讨论】：

【解决方案4】：

即使对于经验丰富的开发人员来说，这也并不总是显而易见的。如果您只想在页脚中包含图像，则可以进行填充。您还缺少 <li> 内的 <ul> 标签。这是一个例子：

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

【讨论】：

这个回复有点晚了。但是谢谢，这解决了我的问题！我阅读了关于 CSS 技巧的 flexbox。然后看到这个并使用你的 jsbin 链接和我的 codepen 东西，它工作了！ :)