如何垂直对齐页脚中图像旁边的文本？

Question

我正在尝试改进我网站的流畅设计，使其最小宽度为 480 像素。我有一个部分快完成了，但挂在固定在底部的页脚上。

它做了我想要的，只是我无法让 img 在中间的文本旁边对齐。 img 不断被压低。 Link

html:

<footer>
<div class="bottom" style="width: 30%;">&nbsp;</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%;">&nbsp;</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;
}

感觉这应该很容易，我只是错过了一些东西。 :P

Answer 1

减少边距

边距：5px 自动；

不是将 img 浮动到右侧，而是将父 div 浮动到右侧

并使用显示：内联块；对于文本

https://jsfiddle.net/kokilajs/pt69y332/6/

<footer>
<div class="bottom" style="width: 33%;">&nbsp;</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%;">&nbsp;</div>
</footer>

风格：

  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;
}

如何垂直对齐页脚中图像旁边的文本？

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

html

css

vertical-alignment