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

kim holder wants Monica back 发表于 Dev

金主希望莫妮卡回来

我正在尝试完善网站的流畅设计，以使其宽度降至480px。我的部分快完成了，但是挂在固定在底部的页脚上。

它做了我想要的，除了我无法使img在中间文本旁边对齐。img不断被压低。关联

的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

阿鲁波塔

减少利润

边距：5px自动;

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

并使用display：inline-block; 用于文字

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