Как сделать изображение перемещение в нижнем колонтитуле

Question

У меня проблема с моим нижним колонтитулом. Я пытаюсь поместить изображение логотипа в верхнюю центральную часть нижнего колонтитула, а часть текста как-то подошла под нижним колонтитулом. Как я могу заставить его продвигаться в секции нижнего колонтитула? У меня есть изображение ниже, чтобы вы, ребята, лучше понять:

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; 

} 

Итак, как я могу нажать на логотип образ а бит выше и сделать текст в нижнем колонтитуле, а не под нижним колонтитулом?

Answer 1

использование position:relative, а затем использовать top или bottom по корректировке

чеке документации 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> 

Проверьте эту ссылку: - http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css