修改

Question

基本上，我有代码：

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

它可以在一台计算机上运行，然后如果我将它加载到另一台计算机上，则根据显示器/分辨率，文本会向左或向右偏移。

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

修改

小屏幕：大屏幕：

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>

Answer 1

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

DEMO

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

DEMO

Answer 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

根据窗口宽度的中间进行div偏移？

修改

HTML

2 个答案: