html - 第 2 部分 - 如何响应式地在图像上放置一个链接，即使屏幕发生变化，该链接仍保持原样？

Question

以下是我的第一篇文章-我试图在 div 背景图像上覆盖一个链接，但希望在我通过使用鼠标并缩小屏幕来测试屏幕宽度时链接保持在原位。网址是 http://jandswebsitedesigns.com/test/index2.html .如您所见，“此处的链接”是我希望链接所在的位置并保留在那里。在我看来，必须有比我设置 txt-link 类的方式更好的方式。

下面显示的脚本和一些代码是我收到的响应。我相信该脚本效果很好 - 使文本居中。但似乎某处有问题 - 不确定。首先，在我的笔记本电脑上，顶部和右侧的位置似乎已关闭。但是当我开始最小化屏幕以查看文本是否重新定位时，效果很好。我正在使用的 ipad2 是另一个问题。我将网站拉到横向，文本偏离中心，我将 ipad 旋转到纵向，文本看起来很棒，然后回到横向，现在文本居中很漂亮。在我的三星 5 手机上，同样的事情，除了我必须刷新屏幕才能显示文本。在更大的桌面显示器上，我第一次打开该站点时，“此处链接”文本位于横跨图像的横幅上方。不确定这里发生了什么？是一个令人耳目一新的问题吗？另外如何调整顶部和右侧属性？

<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%，它将垂直居中。 line-height 和 margin-top 是为了确保文本绝对居中(而不是从中心开始向下填充)。我们使用 text-align: center 水平居中。