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

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

密码本 Link : 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.

显示：弹性；对齐项目：居中；证明内容：space-between;

查看下面的代码片段或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>

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

Footer with copyright and social media icons won't center vertically

html

css

alignment

footer