center div with Font Awesome

Question

私はBootstrap 3.3.5で作成しているサイトがあります。私はdivをアイコンで中央に揃えたいと思います。また、アイコンを中心にしたいと思っています。 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要素ですので、あなたは、単にする必要がありtext-align: centerではなくmargin: 0 autoを使用してください。

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

私はこのhereを展示Bootplyを作成しました。

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のようなものを使用して、各デバイスが中型デバイスと大型デバイスで全幅を占めるようにし、小型デバイスでは幅の1/6しか占有しないようにします。もちろん、12は5で割り切れないので、集中化やパディングなどの独自の回避策を考え出す必要があります）

ハックを示す2次フィドルはhereです。

希望すると便利です。