center div with Font Awesome

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

Однако это временное решение, и вы должны действительно просто установите меньшую ширину столбца. В столбцах Bootstrap всегда добавляется до 12, а col-sm-6 относится к «6 столбцам на небольших устройствах». Как правило, вы должны использовать что-то вроде col-sm-2 col-md-12 col-lg-12, чтобы представить, что каждый элемент должен занимать всю ширину на средних и больших устройствах и занимать только одну шестую ширины на небольших устройствах. Разумеется, 12 не делится на 5, поэтому вам придется придумать свое собственное решение, такое как централизация или заполнение;)

Доступна вторичная скрипка, демонстрирующая хак, here.

Надеюсь, это поможет!