vertically centering text near image

Question

I want my footer to look like this https://i.stack.imgur.com/u1bOO.png

Currently, it looks like this : https://i.stack.imgur.com/BLduc.png

My image is not fixed and I want "Thanks our friends at" to be near the image middle, like in the example above.

Another problem is when I resize the page, all the text from the footer exits from the 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>

Probably you need a `clear:both` to make sure the containing divs fully wrap the content. You've got floated elements, which means they're no longer part of (some) document positioning/sizing calculations. — Marc B, Sep 26 '16 at 15:44
@EdiD's Can you give your site url, Above code not showing footer correct. — Udit Rawat, Sep 26 '16 at 15:45
This is really 2 questions in one. Could you edit so that it asks only one question, and then ask another one in another post? Otherwise, this question will be closed because half of it is a duplicate, and then the other half won't get answered. — Mr Lister, Sep 26 '16 at 15:47
I have formatted your code for you. In my experience, *formatted code is more likely to result in quality output*. Not because the code is pretty, but because you can read, process, and understand it much more quickly. And the attention to detail carries over from your code formatting to the generated output. — random_user_name, Sep 26 '16 at 15:49
@MarcB - I tend to prefer to use `overflow: hidden` on the containing element, vs. adding `clear: both` elements, in order to ensure floated elements display properly. — random_user_name, Sep 26 '16 at 15:50

score 0 · Answer 1 · answered Sep 26 '16 at 15:51

working fiddle: 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;
}

vertically centering text near image

1 Answers1