Question

所以我想在页脚中添加一个徽标。除了左侧的文字之外，它还需要正确。

<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一起使用，它会实用吗？

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

URL： http://jsfiddle.net/5c7DY/6/

享受您的代码！

Answer 2

取对齐=＆＃34;左＆＃34;从图像中如此：

<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

定位页脚徽标

2 个答案: