中心Fontastic字體，這是A標籤？

我在我的網站有一個頁腳，我使用一些Fontastic字體作爲社交圖標。字體使用a標籤顯示。我不能，在我的生活中，弄清楚如何將這些標籤集中在div中。如果有幫助，我使用Sass的Foundation 5框架。下面是代碼：中心Fontastic字體，這是A標籤？

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

來源

2014-03-30 dericcain

您應該能夠使用text-align:center在容器上居中的圖標。現在你應用text-align: center到#social p，這不存在。

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

來源

2014-03-30 21:22:15

我現在用的是'#social p'對齊的文本'div'，我在我發佈的div下面 - 這就是它的原因。我嘗試使用您發佈的解決方案，但沒有奏效。我感謝你的意見。 – dericcain

你可以把你的代碼放在jsfiddle上嗎？或者提供一個到該網站的鏈接？ –

這裏是什麼工作：

CSS（薩斯）

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

來源

2014-04-01 02:55:27 dericcain

中心Fontastic字體，這是A標籤？

回答

相關問題