css - 对齐社交媒体图标并将它们放置在页面中央

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

与其在单独的 div 中对齐它们，不如使用无序列表，如下所示:

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

为了使图像即使在较小的屏幕上也能水平对齐，您需要给出宽度或高度的百分比以使其不向下移动。