html - 无法居中 <li>

Question

我无法居中的页 footer 分 <li>元素:https://codepen.io/Kestvir/pen/VWgxBY

footer {
  background: $footer-blue;
  border-top: 1px solid #4C68B9;
  text-align: center;

  a {
    color: $white;
    transition: color 0.3s;

    &:hover {
      color: $teal;
    }
  }

  .social-links li {
    float: left;
    font-size: $smaller-heading-size;
    padding: 40px 20px;
  }
}

Answer 1

只需更换...

footer .social-links li {
  float: left;
  font-size: 24px;
  padding: 40px 20px; }

...与...

footer .social-links li {
  display : inline-block; 
  font-size: 24px;
  padding: 40px 20px; }

应该可以了!

添加 display : inline-block 允许您在浏览器宽度较大的情况下正确居中。

删除 float: left 可让您在浏览器宽度较小的情况下正确居中。