Question

我正在尝试改进我的网站的流体设计，这样它的宽度可以达到480px。我有一个差不多完成的部分，但挂在固定在底部的页脚上。

它做我想要的，除了我不能让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 auto;

而不是浮动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;
}

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

1 个答案: