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

MARKUP

<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％，它将垂直居中。行高和边距顶部是为了确保文本绝对居中（而不是从中心开始向上填充）。我们使用text-align：center水平居中。

第2部分 - 即使屏幕发生变化，我如何响应地将链接放在保持原位的图像上？

1 个答案: