如何使圖像在頁腳中向上移動

-1

我遇到此問題與我的頁腳。我試圖把標誌圖像放在頁腳的頂部中心部分，文本部分以某種方式在頁腳下面。我怎樣才能讓它在頁腳部分上升？我有一個像下面這樣你們有更好的理解：如何使圖像在頁腳中向上移動

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; 

}

所以，我怎麼能推的標誌圖像更高一點，並使文本在頁腳而不在頁腳下面？

Output

來源

2016-10-09 Ahmed

使用position:relative，然後使用根據調整

檢查文檔top或bottomlink to discription

來源

2016-10-09 13:33:18

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

來源

2016-10-09 13:40:10

如何使圖像在頁腳中向上移動

回答

相關問題