附近圖像

垂直居中的文字我希望我的頁腳看起來像這樣http://i.imgur.com/yZaDZyj.png 附近圖像

目前，它看起來像這樣：http://i.imgur.com/g6VNaV9.png

我的形象是不固定的，我想「感謝我們的朋友」是近圖像中間，就像上面的例子。

另一個問題是當我調整頁面大小時，頁腳中的所有文本都從div退出。

代碼：

#footer { 
 
    background-color: #3f4951; 
 
    display:block; 
 
    margin:0 auto; 
 
    width:100%; 
 
} 
 

 
section { 
 
    display:block; 
 
} 
 

 
.row { 
 
    margin:0 auto; 
 
    width:100%; 
 
} 
 

 
.footer-top { 
 
    padding: 37px 0 38px; 
 
} 
 

 
.column { 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
} 
 

 
.footer-top nav { 
 
    float: left; 
 
    margin: 0; 
 
    max-width: 60%; 
 
    text-align: left; 
 
} 
 

 
.footer-top nav a { 
 
    color:#a9abad; 
 
} 
 

 
.footer-top .thanks {   
 
    margin-left:200px; 
 
    float:left; 
 
    max-width: 35%; 
 
    width: 250px; 
 
} 
 

 
.thankstext { 
 
    color:#a9abad; 
 
    font-size: 16px; 
 
} 
 

 
.footer-top * { 
 
    color:#a9abad;   
 
} 
 

 
.footimage { 
 
}

<div id="footer"> 
 
    <section class="footer-top"> 
 
     <div class="row"> 
 
      <div class="column small-12"> 
 
       <nav> 
 
        <a>New or Existing Home Installation |</a> 
 
        <a href="#">Flushing |</a> 
 
        <a href="#">Serivicing |</a> 
 
        <a href="#">Service3 |</a> 
 
        <a href="#">Service4 |</a> 
 
        <a>All Services will be listed here.</a> 
 
       </nav> 
 
       <div class="thanks"> 
 
        <div class="thankstext">Thanks our friends at</div> 
 
        <img class="footimage" src="footimage.png"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </section> 
 
</div>

來源

2016-09-26 EdiD' s Channel

也許你需要一個'明確：both'以確保包含div完全包裹的內容。你有浮動的元素，這意味着他們不再是（某些）文檔定位/大小計算的一部分。 –

@ EdiD的你可以給你的網站網址，上面的代碼不顯示頁腳正確。 –

這真的是2個問題之一。你可以編輯它只要求一個問題，然後在另一個帖子中詢問另一個問題？否則，這個問題將被關閉，因爲它的一半是重複的，然後另一半不會得到回答。 –

工作小提琴：https://jsfiddle.net/z5wbxzzo/1/

#footer { 
    background-color: #3f4951; 
    display:block; 
    margin:0 auto; 
    width:100%; 



} 
section{ 
    display:block; 
} 
.row { 
    margin:0 auto; 
    width:100%; 
} 
.footer-top{ 
    padding: 37px 0 38px; 
} 
.column { 
     padding-left: 20px; 
    padding-right: 20px; 
} 
.footer-top nav { 
    float: left; 
    margin: 0; 
    max-width: 60%; 
    text-align: left; 
} 
.footer-top nav a { 
    color:#a9abad; 
    display: inline-block; 
} 
.footer-top .thanks { 
    float:right; 
    max-width: 35%; 
    width: 250px; 
} 

.thankstext { 
color:#a9abad; 
    font-size: 16px; 

} 
.footer-top* { 
    color:#a9abad; 

} 

.footer-top .thanks * { 
    display: inline-block; 
}

來源

2016-09-26 15:51:54

回答

相關問題