定位页脚徽标答案

【问题标题】：Positioning footer logo定位页脚徽标
【发布时间】：2014-09-18 14:08:11
【问题描述】：

所以我想在页脚中添加一个徽标。它需要在其左侧的文本旁边。

<div class="siteFooterBar">
    <div class="content">
        <img src="http://i.imgur.com/nuRmQJX.png" width="70px" height="70px" align="left">
            <div class="foot">2014 © All rights reserved.</div>
    </div>
</div>

同时使用margin-left/margin-right 确实可以解决这个问题，因为不同的分辨率会以不同的方式呈现固定长度。这是我想要实现的a fiddle 和graphical example。

解决这个问题的最佳方法是什么？如果我将 % 与 margin-left/margin-right 一起使用会实用吗？

【问题讨论】：

标签： html css alignment css-position footer

【解决方案1】：

试试这个：

HTML：

<div class="siteFooterBar">
        <div class="content">
            <img src="http://i.imgur.com/nuRmQJX.png" >
                <div class="foot">2014 © All rights reserved.</div>
        </div>
    </div>

CSS：

.siteFooterBar {
    position: fixed;
    bottom: 0;
    padding-top: 10px;
    width: 100%;
    box-shadow: 0px 0px 25px rgb(207, 207, 207);
    height: 78px;
    color: #9B9B9B;
    background: #F3F3F3;
}

.content {
    display: block;
    padding: 10px;
    margin: 0px auto;
    text-align: center;
    font: 25px Georgia, "Times New Roman", Times, serif;
    font-size: 14px;
    width:250px;
}
.foot {
 display:inline;
    line-height: 70px;
}
.content img {
 height:70px;
    width: 70px;
    float:left;
}

网址： http://jsfiddle.net/5c7DY/6/

享受您的代码！

【讨论】：

也是一个有效的答案。从我这里来一个。
我的另一个。谢谢你的回答:)

【解决方案2】：

从图片中取 align="left" 如下：

<div class="siteFooterBar">
    <div class="content">
        <img src="http://i.imgur.com/nuRmQJX.png" width="70px" height="70px">
            <div class="foot">2014 © All rights reserved.</div>
    </div>
</div>

比添加一些css：

.foot { display: inline-block; line-height: 70px; vertical-align: top }

.img { display: inline-block;  }

还有JsFiddle

【讨论】：

我正要提交一个答案，因为我以一种不同的方式实现了它：.foot {display: inline-block;} img {vertical-align: middle;}。无论如何，谢谢你的时间:)