Question

正在制作我的网站。我敢肯定，这是一个简单的解决方法，但我实在太难受了！

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

请原谅愚蠢的问题。所有这些都是非常新的，我已经尽了最大的故障排除能力。我希望是一个“ 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

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

我建议以下内容：

重新调整您的HTML，使您的.footer_text div位于.footer_icons div之后。
将以下CSS行添加到您的#main_footer div中。

显示：flex; align-items：居中; 证明内容：间隔；

请参见下面的代码段或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>

Answer 3

$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

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

3 个答案: