Question

我是CSS和HTML世界的新手，所以我很高兴道歉。

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

CODE SNIPPET

＆＃13;

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

＆＃13;

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

＆＃13;

我试图添加＆＃34; padding-bottom＆＃34;到样式表，但图标变小，而不是向上移动几个像素。

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

此致

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类，添加display: table;

的属性

然后将图片代码包装在<div>中，并将display: table-cell的属性分配给div，并将vertical-align: middle;的属性分配。

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

请参阅我作为演示文稿的JsFiddle。

Answer 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

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

4 个答案: