Wie man das Bild nach oben in die Fußzeile bewegt

Question

Ich habe dieses Problem mit meiner Fußzeile. Ich versuche, das Logo Bild in den oberen Teil der Fußzeile und der Text Teil ist irgendwie unter der Fußzeile gegangen. Wie kann ich es in den Fußbereich schieben? Ich habe ein Bild unten, so euch ein besseres Verständnis haben:

HTML:

<div class="footer text-center spacer"> 
    <div class="col-sm-4"> 
     <span>Phone Numbers:</span> 
     <p>077***** <span>or </span>077*****</p> 
    </div> 

    <div class="col-sm-4"> 
      <p> <img src= "images/preloaderlogo2%20.png" class = "swiftly"/></p> 
<p class="wowload flipInX"><a href="#"><i class="fa fa-facebook fa-2x"></i></a> <a href="#"><i class="fa fa-instagram fa-2x"></i></a> <a href="#"><i class="fa fa-twitter fa-2x"></i></a> </p> 
Copyright 2016 Swift Digi. All rights reserved. 
</div> 
    <div class="col-sm-4"> 
     <span>Email:</span> 
     <p>@hotmail.com</p> 
</div> 

CSS:

/*===FOOTER===*/ 

    .footer { 
     background-color:#0A0A0A; 
     color: #fff; 
     font-size: 1em; 
     color: #aaa; 
    } 
    .footer a { 
     color: #aaa; 
     margin: 0 1em; 
    } 

@media (max-width: 767px) { 
    .footer { 
     margin-top: 2em; 
     padding-bottom: 2em; 
    } 

} 

    .footer p{ 
    color: green; 
    font-weight: 700; 
    font-family: 'Roboto', sans-serif; 
} 

.footer span{ 
    color:white; 
    font-weight: 400; 
} 
.footer .col-sm-4{ 

    margin-bottom: 20px; 

} 



.footer img{ 

    text-align:center; 
    height:40px; 

} 

Also, wie kann ich das Logo-Bild ein Push etwas höher und der Text in der Fußzeile und nicht unter der Fußzeile sein?

Answer 1

Verwendung position:relative und verwenden dann top oder bottom nach Einstellung

In der Dokumentation link to discription

Answer 2

html, body { 
height: 100%; 
} 

#container { 
min-height: 100%; 
margin-bottom: -330px; 
position: relative; 
} 

#footer { 
height: 330px; 
position: relative; 
} 

---

<div id="container"> 
    <div id="header">Header</div> 
    <div id="nav"> 
     <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     </ul> 
     </div> 
<div id="content">Content Here.</div> 
    <div class="clearfooter"></div> 
</div><!—End Container—> 
<div id="footer">Footer Here.</div> 

Überprüfen Sie diesen Link: - http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css