Question

我的网站中有一个页脚，我使用一些Fontastic字体作为社交图标。字体使用a标签显示。在我的生活中，我不能弄清楚如何将这些标签置于div中。如果它有帮助，我使用的是带有Sass的Foundation 5框架。这是代码：

HTML

<footer>
  <div id="social"class="row">
    <div class="large-3 small-3 small-centered columns">
      <a href="#" class="icon-gplus"></a>
      <a href="#" class="icon-circled"></a>
      <a href="#" class="icon-twitter"></a>
      <a href="#" class="icon-linkedin"></a>
    </div>
  </div>

CSS

#social {
    background: $grey-color;
    p {
        text-align: center;
        margin-bottom: 24px;
    }
}
.small-centered {
    margin-top: 36px;
}
.icon-gplus {
    display: inline-block;
    font-size: 40px;
    width: 55px;
    height: 55px;
    color: $dark-grey-color;
    text-align: center;
    &:hover{
        color: $black;
    }
}
.icon-circled {
    display: inline-block;
    font-size: 40px;
    width: 55px;
    height: 55px;
    color: $dark-grey-color;
    text-align: center;
    &:hover{
        color: $black;
    }
}
.icon-twitter {
    display: inline-block;
    font-size: 40px;
    width: 55px;
    height: 55px;
    color: $dark-grey-color;
    text-align: center;
    &:hover{
        color: $black;  
    }
}
.icon-linkedin {
    display: inline-block;
    font-size: 40px;
    width: 55px;
    height: 55px;
    color: $dark-grey-color;
    text-align: center;
    &:hover{
        color: $black;
    }
}

Answer 1

您应该可以在容器上使用text-align:center来集中图标。现在，您将text-align: center应用于#social p，但不存在。

.small-centered {
    text-align: center;
}

Answer 2

以下是有效的方法：

CSS（Sass）

#social {
    background: $grey-color;
    p {
        text-align: center;
        margin-bottom: 24px;
    }
}
.small-centered {
    margin-top: 36px;
    text-align: center;
}
.icon-gplus {
    display: inline-block;
    font-size: 40px;
    width: 55px;
    height: 55px;
    color: $dark-grey-color;
    text-align: center;
    @include color-transition(.35s);
    &:hover{
        color: $black;
    }
}
.icon-circled {
    display: inline-block;
    font-size: 40px;
    width: 55px;
    height: 55px;
    color: $dark-grey-color;
    text-align: center;
    @include color-transition(.35s);
    &:hover{
        color: $black;
    }
}
.icon-twitter {
    display: inline-block;
    font-size: 40px;
    width: 55px;
    height: 55px;
    color: $dark-grey-color;
    text-align: center;
    @include color-transition(.35s);
    &:hover{
        color: $black;  
    }
}
.icon-linkedin {
    display: inline-block;
    font-size: 40px;
    width: 55px;
    height: 55px;
    color: $dark-grey-color;
    text-align: center;
    @include color-transition(.35s);
    &:hover{
        color: $black;
    }
}

HTML

<footer>
      <div id="social"class="row">
        <div class="large-3 small-3 small-centered columns">
          <a href="#" class="icon-gplus"></a>
          <a href="#" class="icon-circled"></a>
          <a href="#" class="icon-twitter"></a>
          <a href="#" class="icon-linkedin"></a>
        </div>
      </div>
      <div id="social" class="row">
        <div class="large-12 columns">
          <p>&copy;Blah | Graphic Design | Web Designer | </p>
        </div>
      </div>
    </footer>

中心Fontastic字体，是A标签？

2 个答案: