Выравнивание значков социальных сетей и размещение их в центре страницы

Question

У меня есть набор значков социальных сетей в одной строке, которые сохраняют выравнивание влево на более широких контрольных точках.

Я бы хотел, чтобы они находились посередине страницы, когда на широкой точке останова.

Кроме того, на небольших контрольных точках они превращаются в вертикальный столбец и отображаются друг на друга. Есть ли способ выровнять их в одной строке по горизонтали и централизованно на странице с меньшими точками разрыва?

Я пробовал следующее, но его все еще не помогает.

@media screen and (min-width: 320px) { 
    #social {   
     display: inline-block; 
    } 
} 

Ниже HTML, что я вижу в шаблоне:

<div id="social"> 
    <div class="container"> 
    <div class="row centered"> 
        <div class="col-lg-2"> 
      <a href="url" title="linkedin" target="_blank"> 
      <i class="fa fa-linkedin"></i> 
      </a> 
     </div> 
       <div class="col-lg-2"> 
      <a href="url" title="twitter" target="_blank"> 
      <i class="fa fa-twitter"></i> 
      </a> 
     </div> 
       <div class="col-lg-2"> 
      <a href="url" title="skype" target="_blank"> 
      <i class="fa fa-skype"></i> 
      </a> 
     </div> 
       <div class="col-lg-2"> 
      <a href="url" title="instagram" target="_blank"> 
      <i class="fa fa-instagram"></i> 
      </a> 
     </div> 
      </div><!-- --/row ----> 
    </div><!-- --/container ----> 
</div> 

Есть предложения? Заранее спасибо!

Answer 1

Вместо приведения их в отдельных дивы использовать неупорядоченные списки следующим образом:

HTML

<div id="social"> 
    <div id="container"> 
    <ul> 
     <li> 
      <a href="url" title="linkedin" target="_blank"> 
       <i class="fa fa-linkedin"></i> 
      </a> 
     </li> 

     <li> 
      <a href="url" title="twitter" target="_blank"> 
       <i class="fa fa-twitter"></i> 
      </a> 
     </li> 

     <li> 
      <a href="url" title="skype" target="_blank"> 
       <i class="fa fa-skype"></i> 
      </a> 
     </li> 

     <li> 
      <a href="url" title="instagram" target="_blank"> 
       <i class="fa fa-instagram"></i> 
      </a> 
     </li> 
    </ul> 
    </div> 
</div> 

А вот CSS часть

#social #container { 
    text-align: center; 
} 

#social #container ul { 
    float: left; 
} 

#social #container ul li { 
    float: left; 
    padding-left: 10px; 
    list-style-type: none; 
} 

И делает изображение, которое должно быть выровнено горизонтально даже на меньшем экране, вам нужно дать процентную ширину или высота, чтобы не двигаться вниз.