html - 无法将图像与 div 中的文本居中对齐

Question

我正在尝试为带有社交媒体帐户链接的网站创建页脚，但我无法将图像居中。

文本正确居中，但显然图像不是，它们更靠近右边。

这是它的样子:

.footer {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  background-color: green;
}

.footer ul{
  list-style: none;
}

.footer ul li {
  font-size: 26px;
  display: inline-block;	
  background-color: red;
  padding-bottom: 3px;
}

.footer a {
  text-decoration: none;
  color: white;
  padding-left:10px;
  padding-right: 10px;
  text-align: center;
}

.footer a:hover {
  color: orangered;
}
.footer p{
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
}

.footer img{
  text-align: center;
  opacity: 0.7;
  height: 50px;
  width: 50px;
  margin: auto;
  display: inline-block;
}
.footer img:hover{
  opacity: 1.0;
}

<div class="footer">
  <ul>   
    <li><a href="mailto:bannermangavin@gmail.com"><img src="/resources/email.png" alt="mail"></a></li>
    <li><a href="https://uk.linkedin.com/in/gavin-bannerman" target="_blank"><img src="/resources/linkedin.png" alt="linkedin page"></a></li>
    <li><a href="https://github.com/gavinbannerman" target="_blank"><img src="/resources/github.png" alt="github page"></a></li>
  </ul>
  <p>Copyright Company Name &copy; 2016 | All Rights Reserved</p>
</div>

我已经搜索了多个线程，甚至复制了代码，但我似乎无法让它工作。

这是我工作的 fiddle :https://jsfiddle.net/p64q1aru/

Answer 1

您的 ul(列表)有 padding-left 需要重置:

.footer ul {
   list-style:none;
   padding:0;
}

删除填充可以解决问题并集中您的列表元素。