1

基本上，我有代码：

<div id="footer">
    <a href="http://site.com/" target="_blank"><img src="image here.jpg"></a>
    <div style="position:absolute;left:5px;top:0px;">
        text here
    </div>
</div>

CSS：

#footer { line-height:125px; margin:0 auto; width:500px;height:100%; text-align:center;color:#ECECEC; }

它在一台计算机上工作得很好，然后如果我将它加载到另一台计算机上，文本会根据显示器/分辨率进一步向左或向右偏移。

如何设置它使其居中但悬停在图像上方/下方到图像右侧的偏移量？

编辑

小屏幕：http://i.imgur.com/El2k8jG.png 大屏幕：http://i.imgur.com/0Nsskrz.png

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>stuff here</title>
<style type="text/css">
#footer_container {border:0px solid #666; bottom:0; height:95px; left:0; position:fixed; width:100%; }
#footer { line-height:125px; margin:0 auto; width:500px;height:100%; text-align:center; }
#footer2 { line-height:165px; margin:0 auto; width:500px;height:100%; text-align:center;  }
</style>
</head>
<body>
<div id="container">
stuff here
</div>
<div id="footer_container">
    <div id="footer">
        <a href="http://site.com/" target="_blank"><img src="http://i.imgur.com/nx8pHGH.png"></a>
        <div style="position:absolute;left:500px;top:0px;">
            <i><font color=black>dasdasdasd dsad dasdasdas dsadsad <a href="http://site.com/" target="_blank">ssdasdasd</font></a>.</i>
        </div>
    </div>
    <div id="footer2">
        <div style="position:absolute;left:500px;top:0px;">
            <font color=black><b>dasdsa dasdasd dasdasdasd dasdsadsad .</b></font>
        </div>
    </div>
</div>
</body>
</html>
4

2 回答 2

4

position: relative;如果您希望文本相对于页脚绝对定位，则需要在页脚上进行设置。

演示

或者你可以删除所有的定位和巨大的行高

演示

于 2013-11-02T01:12:25.053 回答
2

您可以使用图像作为background-image替代。然后定位文本要容易得多

HTML

<div id="footer">
    <a href="http://site.com/" target="_blank">
        <div>text here</div>
    </a>
</div>

CSS

#footer {
    line-height:125px;
    margin:0 auto;
    width:500px;
    height:100px;
    text-align:center;
    color:#ECECEC;
    background-image: url(http://i.imgur.com/nx8pHGH.png);
    background-repeat: no-repeat;
}

见JSFiddle

于 2013-11-02T01:58:07.210 回答