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

Question

致力于制作我的网站。我确信这是一个简单的解决方法，但我被卡住了！

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

Here's what that looks like

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

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

 #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

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

  .footer_text {
    font-size: 17px;
    line-height:60px;
    float: right;
  }

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

      &:hover {
        color: $secondary-color;
      }
    }
  }
}

i{
  font-family:'FontAwesome';
}

 <footer id="main-footer">

  <div class="footer_icons">
    <a href="https://www.instagram.com/beellllaa/">
      <i class="fa fa-instagram fa-2x"></i>
    </a>
    <a href="https://www.linkedin.com/in/beellllaa/">
      <i class="fa fa-linkedin fa-2x"></i>
    </a>
    <a href="https://www.vimeo.com/beellllaa/">
      <i class="fa fa-vimeo fa-2x"></i>
    </a>
  </div>
   <div class="footer_text">Copyright &copy; 2018</div>

</footer>

这应该可行。 .footer_text{float:right;line-height:60px;}.footer_icons{display:inline-block;}

Codepen 链接：https://codepen.io/mk_dev/pen/KxbyJp

Answer 2

我无法通过 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>

Answer 3

我会推荐以下内容：

• 重新调整 HTML，使 .footer_text div 位于 .footer_icons div 之后。

• 将以下几行 CSS 添加到您的#main_footer div。

  显示：弹性； 对齐项目：居中； justify-content: 中间空格；

见下方代码 sn-p 或this codepen:

#main-footer {
  padding: center;
  background: darken($primary-color, 10);
  color: set-text-colour($primary-color);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .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_icons">
    <a href="https://www.instagram.com/beellllaa/">
      <i class="fab fa-instagram fa-2x">IG</i>
    </a>
    <a href="https://www.linkedin.com/in/beellllaa/">
      <i class="fab fa-linkedin fa-2x">LI</i>
    </a>
    <a href="https://www.vimeo.com/beellllaa/">
      <i class="fab fa-vimeo fa-2x">VI</i>
    </a>
  </div>
   
   <div class="footer_text">Copyright &copy; 2018</div>

</footer>