中心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。

希望这会有所帮助！