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

Question

Working on making my website. I'm sure this is an easy fix but I'm so stuck!

I am trying to vertically center the copyright info on the right, then the social icons on the left. But they appear to be stacked then aligned left and right.

Here's what that looks like

Please forgive the dumb question. Very new to all this, and I've done as much troubleshooting as I can. I'm hoping is a "duh" answer!

I have a footer in my index which reads like this:

 #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

I would recommend the following:

• Readjust your HTML so that your .footer_text div comes after the .footer_icons div.

• Add the following lines of CSS to your #main_footer div.

  display: flex; align-items: center; justify-content: space-between;

See the code snippet below or 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 2

$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>

This should work. .footer_text{float:right;line-height:60px;} .footer_icons{display:inline-block;}

Codepen Link : https://codepen.io/mk_dev/pen/KxbyJp

Answer 3

I was unable to directly use your code via codepen, so I mocked up something quick. You could quickly center vertically by using flexbox. This might require though that you use some prefixes as well. Can check it out here:

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>