vertikal zentriert Text in der Nähe von Bild

Question

ich meine Fußzeile wie dieses http://i.imgur.com/yZaDZyj.png

Zur Zeit suchen wollen, sieht es wie folgt aus: http://i.imgur.com/g6VNaV9.png

Mein Bild nicht festgelegt ist, und ich will „Dank unseren Freunden bei“ nahe sein die Bildmitte, wie im obigen Beispiel.

Ein weiteres Problem ist, wenn ich die Größe der Seite ändern, der gesamte Text aus der Fußzeile von der div.

Code:

#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>

Answer 1

Arbeits Geige: 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; 
}