中心div與字體真棒

Question

我有一個網站，我使用Bootstrap 3.3.5。我想用圖標居中div，我也希望圖標居中，比如text-align：center;如果它只是文本而不是Fonat Awesome圖標，將會這樣做。這是我到目前爲止所嘗試的，css位於我的css文件夾和custom.css頁面中。

@media (min-width: 992px) { 
 
    .col-md-1-5 { width: 20%; } 
 
    .col-md-2-5 { width: 40%; } 
 
    .col-md-3-5 { width: 60%; } 
 
    .col-md-4-5 { width: 80%; } 
 
    .col-md-5-5 { width: 100%; } 
 
} 
 

 
@media (min-width: 1200px) { 
 
    .col-lg-1-5 { width: 20%; } 
 
    .col-lg-2-5 { width: 40%; } 
 
    .col-lg-3-5 { width: 60%; } 
 
    .col-lg-4-5 { width: 80%; } 
 
    .col-lg-5-5 { width: 100%; } 
 
} 
 

 
.show-grid [class^=col-] span, 
 
.container-fluid .show-grid [class^=col-] { 
 
    display: block; 
 
    padding-top: 1rem; 
 
    padding-bottom: 1rem; 
 
    text-align: center; 
 
} 
 

 
[class^=col-] { 
 
    margin-bottom: 2rem; 
 
}

<div class="row show-grid"> 
 
     <div class="col-sm-6 col-md-4-5 col-lg-1-5 text-center"><span class=""><a href="https://play.google.com/store/apps/details?id=com.nationalkitchencabinets.kitchensolutions" target="_blank"> 
 

 
     <span class="fa-stack fa-lg"> 
 
            <i class="fa fa-circle fa-stack-2x"></i> 
 
            <i class="fa fa-google fa-stack-1x fa-inverse"></i> 
 
           </span> 
 
          </a></span> 
 
     </div> 
 
     <div class="col-sm-6 col-md-5-5 col-lg-1-5 text-center"><span class=""><a href="https://appsto.re/us/IxCMbb.i" target="_blank"> 
 
     <span class="fa-stack fa-lg"> 
 
            <i class="fa fa-circle fa-stack-2x"></i> 
 
            <i class="fa fa-android fa-stack-1x fa-inverse"></i> 
 
           </span> 
 
          </a></span> 
 
     </div> 
 
     <div class="col-sm-6 col-md-3-5 col-lg-1-5 text-center"><span class=""><a href="mailto:info@nationalkitchencabinets.com"> 
 
           <span class="fa-stack fa-lg"> 
 
            <i class="fa fa-circle fa-stack-2x"></i> 
 
            <i class="fa fa-envelope fa-stack-1x fa-inverse"></i> 
 
           </span> 
 
          </a></span> 
 
     </div> 
 
     <div class="col-sm-6 col-md-3-5 col-lg-1-5 text-center"><span class=""><a href="https://www.facebook.com/NationalKitchenCabinets/" target="_blank"> 
 
           <span class="fa-stack fa-lg"> 
 
            <i class="fa fa-circle fa-stack-2x"></i> 
 
            <i class="fa fa-facebook fa-stack-1x fa-inverse"></i> 
 
           </span> 
 
          </a></span> 
 
     </div> 
 
     <div class="col-sm-6 col-md-3-5 col-lg-1-5 text-center"><span class=""><a href="tel:1-413-374-2939"> 
 
           <span class="fa-stack fa-lg"> 
 
            <i class="fa fa-circle fa-stack-2x"></i> 
 
            <i class="fa fa-phone fa-stack-1x fa-inverse"></i> 
 
          </span> 
 
          </a></span> 
 
     </div> 
 
    </div>

這是它看起來像現在，該圖標左對齊，

Answer 1

您試圖對齊是block元素的元素，所以你只需要使用margin: 0 auto而不是text-align: center。

.show-grid [class^=col-] span, 
.container-fluid .show-grid [class^=col-] { 
    text-align: center; 
} 

應該是：

.show-grid [class^=col-] span, 
.container-fluid .show-grid [class^=col-] { 
    margin: 0 auto; 
} 

我創建了一個Bootply展示這個here。

UPDATE：

臨時黑客有圖標旁邊顯示對方手機會像下面這樣：

@media (max-width: 500px) { 
    .col-sm-6 { 
    width: 20% !important; 
    float: left; 
    } 
} 

然而，這是一種解決方法，你應該真的只需設置一個較小的列寬。引導列總是加起來12，col-sm-6引用'小設備上的6列'。通常情況下，您可以使用類似col-sm-2 col-md-12 col-lg-12的東西來表示每個元素在中型和大型設備上佔用全寬，並且只佔用小型設備寬度的六分之一。當然，12不能被5整除，所以你必須拿出你自己的解決方法，比如集中或填充;）

展示黑客的輔助提琴可用here。

希望這會有所幫助！