第2部分--即使屏幕发生变化，我如何才能在图像上建立链接呢？

Question

下面是我的第一次发布，我试图在div背景图像上覆盖一个链接，但是我希望通过鼠标和缩小屏幕来测试屏幕宽度时，链接保持在原地。网址是http://jandswebsitedesigns.com/test/index2.html。正如你所看到的，“这里的链接”是我想要链接的地方，并停留在那里。在我看来，必须有一个比我设置txt链接类更好的方法。

脚本和下面显示的代码是我收到的响应。脚本工作的很好，我相信--回复文本。但有些地方似乎出了问题--不确定。首先，在我的笔记本电脑，顶部和正确的位置似乎是关闭的。但是，当我开始最小化屏幕来查看文本是否重新定位时，它的效果很好。我正在使用的ipad2是另一个问题。我把网站拉上风景，文字离中心，我旋转ipad来描绘，文字看起来很棒，然后回到风景，现在文字是中心漂亮。在我的三星5手机，同样的事情，除了我必须刷新屏幕，以使文本显示。在一个更大的桌面显示器上，当我第一次拉起这个站点时，"a link“文本出现在横幅上，横幅在图像上。不知道这是怎么回事？是一个令人耳目一新的问题吗？此外，我如何调整顶部和右边的属性？

<script>
$(window).resize(function(){

    $image = $("#image");
    $link = $("#linkContent");

    imageTop = $image.offset().top;
    imageLeft = $image.offset().top;
    imageWidth = $image.width();
    imageHeight = $image.height();
    linkWidth = $link.width()/2;
    linkHeight = $link.height()/2;

    $link.offset({top:(imageTop+imageHeight)/2 - linkHeight,left:(imageWidth+imageLeft)/2 - linkWidth});
})
</script> 


 <img id="image" class="fixed" src="images/RFYL-MainPageBanner.jpg">
 <div id="linkContent" style="font-size: 25px; 
       color: rgb(255, 255, 255); position: absolute; z-index: 2; 
       top: 510px; left: 734px;">
   <div>a link here</div>
 </div>            

Answer 1

如果目的是使文本中心对齐，为什么不使用纯CSS呢？

http://jsfiddle.net/73rebh4c/

CSS：

#img-container{
    position: relative;
    width: 100%;
}

#img-container img{
    width: 100%;   
}

#text-container{
    position: absolute;
    text-align: center;
    top: 50%;
    left: 0px;
    right: 0px;
    line-height: 40px;
    margin-top: -20px;   
    color: #FFF;
    text-transform: uppercase;
    color: #FFF;
}

标记

<div id="img-container">
    <img id="image" src="http://jandswebsitedesigns.com/test/images/RFYL-MainPageBanner.jpg">
    <div id="text-container">a link here</div>
</div>

这是怎么回事？

图像包含在具有相对位置的DIV中，图像将填充容器(使用宽度为100%)。随着图像宽度的增加，它将迫使包含的div与其高度相匹配。

文本绝对定位于div。使用顶部50%，它将垂直中心。线高和边距顶部是为了确保文本绝对是中心(而不是从中间开始，向下填充)。我们使用文本对齐:居中来水平地居中.