html - 如何将按钮定位在图像顶部居中

Question

我一直在尝试制作一个像 this 这样的简单网站.该按钮永远不会按预期显示。我希望 #play_button 准确显示在背景中的播放按钮图像上。怎么做到的？

我的 CSS 代码:

body { 
     background: url('http://oi44.tinypic.com/33tjudk.jpg') no-repeat center center fixed;    
     background-size:cover;  /*For covering full page*/
}

#play_button {
    position:relative;
    transition: .5s ease;
    top: 191px;
    left: 420px;
    right: -420px;
    bottom: -191px;
}
#play_button:hover { 
    -webkit-transform: scale(1.05);/*Grows in size like Angry Birds button*/
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
}

还有一件事，发生的问题是，如果我调整浏览器窗口的大小，图像就会移动到一个新的位置。

更新:

问题已解决:) Here, in this example ，您可以看到按钮如何保持在页面的中心，即使您调整浏览器窗口的大小。与往常一样，您可以调整 left 和 top 偏移量以获得期望的结果。 Here's the code .

Answer 1

尝试使用绝对定位，而不是相对定位

这应该让你接近 - 你可以通过调整边距或顶部/左侧位置进行调整

#play_button {
    position:absolute;
    transition: .5s ease;
    top: 50%;
    left: 50%;
}

http://jsfiddle.net/rolfsf/9pNqS/