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

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

对齐社交媒体图标并将它们放在页面的中心

1 个答案: