html - 带有版权和社交媒体图标的页脚不会垂直居中

Question

正在制作我的网站。我确信这是一个简单的修复方法，但我被困住了!

我试图将版权信息垂直居中放在右边，然后是社交图标放在左边。但它们似乎是堆叠起来然后左右对齐的。

Here's what that looks like

请原谅这个愚蠢的问题。对这一切都很陌生，我已经尽可能多地进行故障排除。我希望是一个“呃”的答案!

我的索引中有一个页脚，内容如下:

 #main-footer {
  padding: center;
  background: darken($primary-color, 10);
  color: set-text-colour($primary-color);
  height: 60px;

  .footer_text {
    text-align: right;
    font-size: 17px;
  }

  .footer_icons {
    margin-left: 5%;
    text-align: center;
    display: block;
    width: 100px;
    padding: 4px;
    a {
      align: left;

      &:hover {
        color: $secondary-color;
        @include easeOut;
      }
    }
  }
}

<footer id="main-footer">

  <div class="footer_text">Copyright &copy; 2018</div>

  <div class="footer_icons">
    <a href="https://www.instagram.com/beellllaa/">
      <i class="fab fa-instagram fa-2x"></i>
    </a>
    <a href="https://www.linkedin.com/in/beellllaa/">
      <i class="fab fa-linkedin fa-2x"></i>
    </a>
    <a href="https://www.vimeo.com/beellllaa/">
      <i class="fab fa-vimeo fa-2x"></i>
    </a>
  </div>

</footer>  

Answer 1

我无法通过 codepen 直接使用您的代码，所以我快速模拟了一些东西。您可以使用 flexbox 快速垂直居中。这可能还需要您使用一些前缀。可以在这里查看:

https://codepen.io/pen/?editors=1100

#main-footer {
  background-color: teal;
  
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.social {
  display: flex;
}

.footer-icons {
  background-color: red;
  height: 10px;
  width: 10px;
  margin: 5px;
  padding: 5px;
}

<footer id="main-footer">
  <div>Copyright &copy; 2018</div>
  
  <div class="social">
    <div class="footer-icons"></div>
    <div class="footer-icons"></div>
    <div class="footer-icons"></div>
  </div>
  
</footer>