如何使图像在页脚中向上移动

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