How to vertically align text beside an image in the footer? - html

Question

I am trying to refine the fluid design of my website, such that it will work down to 480px width. I have a section almost done but am hung up on the footer fixed to the bottom.
It does what i want except i can't get the img to align beside the text in the middle. The img keeps getting pushed down. Link
html:
<footer>
<div class="bottom" style="width: 30%;"> </div>
<div class="bottom" style="width: 30%;">
<div style="text-align: right;">
kim#<br>briligg.com
</div>
<div>
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/">
<img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png"
title="This work is licensed under a Creative Commons Attribution 4.0 International License. If you use this
work, attribute it to Kim Holder, and briligg.com."/>
</a>
</div>
</div>
<div class="bottom" style="width: 30%;"> </div>
</footer>
css:
footer {
width: 100%;
height: 45px;
position: fixed;
bottom: 0px;
background-color: #000015;
}
div.bottom {
float: left;
margin: 10px auto;
height: 40px;
color: #9dab71;
font-size: 0.8em;
display: inline;
}
div.bottom div {
display: inline;
}
div.bottom img {
float: right;
padding: 5px;
margin: 2px auto;
}
It feels like this should be easy and i'm just missing something. :P

Answer 1

reduce margins
margin: 5px auto;
instead of float img to right, parent div floated to right
and use display: inline-block; for text
https://jsfiddle.net/kokilajs/pt69y332/6/
<footer>
<div class="bottom" style="width: 33%;"> </div>
<div class="bottom" style="width: 33%;">
<div style="text-align: right;">
kim#<br/>briligg.com
</div>
<div id="test" >
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/">
<img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png"
title="This work is licensed under a Creative Commons Attribution 4.0 International License. If you use this
work, attribute it to Kim Holder, and briligg.com."/>
</a>
</div>
</div>
<div class="bottom" style="width: 33%;"> </div>
</footer>
Style :
footer {
width: 100%;
height: 45px;
position: fixed;
bottom: 0px;
background-color: #000015;
}
div.bottom {
float: left;
margin: 5px auto;
height: 40px;
color: #9dab71;
font-size: 0.8em;
display: inline;
}
div.bottom div {
display: inline-block;
}
#test{
float: right;
margin: 0;
}