HTML / CSS页脚未对齐

Question

My site 's footer is a little off with the logo being underneath everything, when I want it in the top right of the footer and the copyright bottom left. Anyone know what I've done wrong ?

Code:

 .footer-distributed{ background-color: #292c2f; font: bold 16px sans-serif; padding: 5px 5px; margin-top: 30px; width:100% height:20px; } .footer-distributed .footer-left, .footer-distributed .footer-center, .footer-distributed .footer-right{ display: inline-block; vertical-align: middle; } /* Footer left */ .footer-distributed .footer-left{ width: 40%; } .animedblogo-white { width: 200px; height: 70px; } /* Footer links */ .footer-distributed .footer-links{ color: #ffffff; margin: -50px 0 10px; padding: 0; } .footer-distributed .footer-links a{ display:inline-block; line-height: 1.8; text-decoration: none; color: inherit; } .footer-distributed .footer-company-name{ color: #8f9296; font-size: 14px; font-weight: normal; margin: 0; } .twitter-icon { width:100%; } .temple-icon { width:100%; } .leaf-icon { width:100%; } /* Footer Center */ .footer-distributed .footer-center{ width: 35%; } .footer-distributed .footer-center i{ background-color: #33383b; color: #ffffff; font-size: 25px; width: 100px; height: 100px; border-radius: 100%; text-align: center; line-height: 10px; margin: 50px 50px; vertical-align: middle; } .footer-distributed .footer-center i.fa-envelope{ font-size: 17px; line-height: 38px; } .footer-distributed .footer-center p{ display: inline-block; color: #ffffff; vertical-align: middle; margin:0; } .footer-distributed .footer-center p span{ display:block; font-weight: normal; font-size:14px; line-height:2; } .footer-distributed .footer-center pa{ color: #5383d3; text-decoration: none;; } /* Footer Right */ .footer-distributed .footer-right{ width: 20%; } .footer-distributed .footer-company-about{ line-height: 20px; color: #92999f; font-size: 13px; font-weight: normal; margin: 0; } .footer-distributed .footer-company-about span{ display: block; color: #ffffff; font-size: 14px; font-weight: bold; margin-bottom: 20px; } .footer-distributed .footer-icons{ margin-top: 25px; } .footer-distributed .footer-icons a{ display: inline-block; width: 35px; height: 35px; cursor: pointer; background-color: #33383b; border-radius: 2px; font-size: 20px; color: #ffffff; text-align: center; line-height: 35px; margin-right: 3px; margin-bottom: 5px; } @media (max-width: 880px) { .footer-distributed{ font: bold 14px sans-serif; } .footer-distributed .footer-left, .footer-distributed .footer-center, .footer-distributed .footer-right{ display: block; width: 100%; margin-bottom: 40px; text-align: center; } .footer-distributed .footer-center i{ margin-left: 0; } } 

  <footer class="footer-distributed"> <div class="footer-left"> <img src="img/adbwhite.png" alt="animedblogo-white" class="animedblogo-white"/> <p class="footer-links"> <a href="#">HOME</a> · <a href="#">ANIME</a> · <a href="#">MANGA</a> · <a href="#">FORUMS</a> · <a href="#">FAQ</a> · <a href="#">CONTACT</a> </p> <p class="footer-company-name">TheAnimeDatabase &copy; 2015, copyrights and trademarks for the anime, and other promotional materials are held by their respective owners and their use is allowed under the fair use clause of the Copyright Law.</p> </div> <div class="footer-center"> <div> <i class="fa fa-map-marker"></i> <p><span>This site is completely ad free for your enjoyment!</span>So please consider a small donation</p> </div> <div> <i class="fa fa-envelope"></i> <p><a href="mailto:business@theanimedatabase.com">business@theanimedatabase.com</a></p> </div> </div> <div class="footer-right"> <p class="footer-company-about"> <span>STAY CONNECTED!</span> Make sure to check out our offical social media sites and our steam groups sponcers below, staying connected with us will fill you in with everything you need to know and more </p> <div class="footer-icons"> <a href="https://twitter.com/TheAnimeDB_"><i class="link-twitter"></i><img src="img/twitter.png" alt="twitter-icon" class="twitter-icon"/></a> <a href="http://steamcommunity.com/groups/AnimeTemple"><i class="link-temple"></i><img src="img/temple.png" alt="temple-icon" class="temple-icon"/></a></a> <a href="http://steamcommunity.com/groups/The-Hidden-Leaf-Village"><i class="link-hidden"></i><img src="img/leaf.png" alt="leaf-icon" class="leaf-icon"/></a> </div> </div> </footer> 

Answer 1

Just add this 1 class in css & add 1 DIV on Html

Add below class on Css
.footer_logo{display: block;height: 125px;}

Set Logo on Div

<div class="footer_logo">
<img src="http://www.theanimedatabase.com/img/adbwhite.png" alt="animedblogo-white" class="animedblogo-white"/>
</div>

.footer-distributed{
  background-color: #292c2f;
  font: bold 16px sans-serif;
  padding: 5px 5px;
  margin-top: 30px;
  width:100%
  height:20px;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
  display: inline-block;
  vertical-align: middle;
}

/* Footer left */

.footer-distributed .footer-left{
  width: 40%;
}

.animedblogo-white {
    width: 200px;
    height: 70px;

}


/* Footer links */

.footer-distributed .footer-links{
  color:  #ffffff;
  margin: -50px 0 10px;
  padding: 0;
}

.footer-distributed .footer-links a{
  display:inline-block;
  line-height: 1.8;
  text-decoration: none;
  color:  inherit;
}

.footer-distributed .footer-company-name{
  color:  #8f9296;
  font-size: 14px;
  font-weight: normal;
  margin: 0;
}

.twitter-icon {
  width:100%;
}

.temple-icon {
  width:100%;
}

.leaf-icon {
  width:100%;
}


/* Footer Center */

.footer-distributed .footer-center{
  width: 35%;
}

.footer-distributed .footer-center i{
  background-color:  #33383b;
  color: #ffffff;
  font-size: 25px;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  text-align: center;
  line-height: 10px;
  margin: 50px 50px;
  vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope{
  font-size: 17px;
  line-height: 38px;
}

.footer-distributed .footer-center p{
  display: inline-block;
  color: #ffffff;
  vertical-align: middle;
  margin:0;
}

.footer-distributed .footer-center p span{
  display:block;
  font-weight: normal;
  font-size:14px;
  line-height:2;
}

.footer-distributed .footer-center p a{
  color:  #5383d3;
  text-decoration: none;;
}


/* Footer Right */

.footer-distributed .footer-right{
  width: 20%;
}

.footer-distributed .footer-company-about{
  line-height: 20px;
  color:  #92999f;
  font-size: 13px;
  font-weight: normal;
  margin: 0;
}

.footer-distributed .footer-company-about span{
  display: block;
  color:  #ffffff;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
}

.footer-distributed .footer-icons{
  margin-top: 25px;
}

.footer-distributed .footer-icons a{
  display: inline-block;
  width: 35px;
  height: 35px;
  cursor: pointer;
  background-color:  #33383b;
  border-radius: 2px;


  font-size: 20px;
  color: #ffffff;
  text-align: center;
  line-height: 35px;

  margin-right: 3px;
  margin-bottom: 5px;
}


@media (max-width: 880px) {

  .footer-distributed{
    font: bold 14px sans-serif;
  }

  .footer-distributed .footer-left,
  .footer-distributed .footer-center,
  .footer-distributed .footer-right{
    display: block;
    width: 100%;
    margin-bottom: 40px;
    text-align: center;
  }

  .footer-distributed .footer-center i{
    margin-left: 0;
  }

}

    <footer class="footer-distributed">

      <div class="footer-left">
        <div class="footer_logo">
        <img src="http://www.theanimedatabase.com/img/adbwhite.png" alt="animedblogo-white" class="animedblogo-white"/>
        </div>
        <p class="footer-links">
          <a href="#">HOME</a>
          ·
          <a href="#">ANIME</a>
          ·
          <a href="#">MANGA</a>
          ·
          <a href="#">FORUMS</a>
          ·
          <a href="#">FAQ</a>
          ·
          <a href="#">CONTACT</a>
        </p>

        <p class="footer-company-name">TheAnimeDatabase &copy; 2015, copyrights and trademarks for the anime, and other promotional materials are held by their respective owners and their use is allowed under the fair use clause of the Copyright Law.</p>
      </div>

      <div class="footer-center">

        <div>
          <i class="fa fa-map-marker"></i>
          <p><span>This site is completely ad free for your enjoyment!</span>So please consider a small donation</p>
        </div>

        <div>
          <i class="fa fa-envelope"></i>
          <p><a href="mailto:business@theanimedatabase.com">business@theanimedatabase.com</a></p>
        </div>

      </div>

      <div class="footer-right">

        <p class="footer-company-about">
          <span>STAY CONNECTED!</span>
          Make sure to check out our offical social media sites and our steam groups sponcers below, staying connected with us will fill you in with everything you need to know and more
        </p>

        <div class="footer-icons">

          <a href="https://twitter.com/TheAnimeDB_"><i class="link-twitter"></i><img src="img/twitter.png" alt="twitter-icon" class="twitter-icon"/></a>
          <a href="http://steamcommunity.com/groups/AnimeTemple"><i class="link-temple"></i><img src="img/temple.png" alt="temple-icon" class="temple-icon"/></a></a>
          <a href="http://steamcommunity.com/groups/The-Hidden-Leaf-Village"><i class="link-hidden"></i><img src="img/leaf.png" alt="leaf-icon" class="leaf-icon"/></a>

        </div>

      </div>

    </footer>