Sass 和 Compass 居中问题

Question

我还在学习 Sass、Compass 和 Susy，所以请多多包涵。我在将我的列表放在页脚中心时遇到了一点问题。它一直向左浮动。这是我正在使用的代码：

<footer>
<ul class="social">
    <li><a href="#"><i class="fa fa-facebook-square fa-3x"></i></a></li>
    <li><a href="#"><i class="fa fa-twitter-square fa-3x"></i></a</li>
    <li><a href="#"><i class="fa fa-instagram fa-3x"></i></a></li>
</ul>
<div class="copyright">&copy;2104 meylorodriguez.com<br />All Rights Reserved</div>
</footer>

这是我的 (s)CSS：

footer {

    ul.social {
        @include horizontal-list;
        background: $skyblue;
        padding: 4%;

        li a {
            color: $white;
        }       
    }

    .copyright {
        padding: 4%;
        text-align: center;
        font-family: 'Arbutus Slab', serif;
        font-size: small;
        color: $gray;
    }

}

我只需将三个社交媒体图标放在页脚的中心即可。

Answer 1

问题是horizontal-list 将float:left 添加到您的<li>s。所以，你总是有左边的列表。

有一种方法可以防止这种情况。如果您将display: inline-block 设置为<ul>，并将背景和对齐方式设置为<footer>，您就会明白这一点。

试试看：

footer {
  padding: 4%;
  background: blue;
  text-align: center;

  ul.social {
      @include horizontal-list;
      display: inline-block;

      li a {
         color: white;
      }       
  }

  .copyright {
    padding: 2% 4%;
    text-align: center;
    font-family: 'Arbutus Slab', serif;
    font-size: small;
    color: gray;
  }
}

希望对你有帮助。

问候。

编辑：为了测试它，我添加了我的自定义颜色值，你必须将其更改为你的