Html 如何在 CSS 中准确定位按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18640503/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position the Button exactly in CSS
提问by Gaurang Tandon
I have been trying to make a simple site like this. However , I do now realize that I am bad at CSS Positioning for the button never does show up as intended.
As you might have guessed , I want the button (#play_button) to show up exactly on the play button image in the background. Can someone please tell me how it's to be done ?
我一直在尝试制作一个像这样的简单网站。但是，我现在意识到我不擅长 CSS 定位，因为按钮从未按预期显示。
您可能已经猜到了，我希望按钮 (#play_button) 准确地显示在背景中的播放按钮图像上。有人可以告诉我怎么做吗？
My CSS code:
我的 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);
}
UPDATE:
更新：
Just one thing more, problem occurring is that if I re size the browser window , then the image moves to a new position.
还有一件事，发生的问题是，如果我调整浏览器窗口的大小，则图像会移动到新位置。
UPDATE:
更新：
Problem solved :) Here, in this example, you can see how the button remains in the center of the page even if you re size the browser window.As always , you can tweak the leftand topoffsets to get the desired results. Here's the code.
问题已解决 :)在此示例中，即使您调整浏览器窗口的大小，您也可以看到按钮如何保持在页面的中心。一如既往，您可以调整left和top偏移以获得所需的结果。这是代码。
采纳答案by Gaurang Tandon
So, the trick here is to use absolute positioning calclike this:
所以，这里的技巧是使用绝对定位，calc如下所示：
top: calc(50% - XYpx);
left: calc(50% - XYpx);
where XYpx is half the size of your image, in my case, the image was a square. Of course, in this now obsolete case, the image must also change its size proportionally in response to window resize to be able to remain at the center without looking out of proportion.
其中 XYpx 是图像大小的一半，在我的情况下，图像是一个正方形。当然，在这种现在已经过时的情况下，图像还必须根据窗口大小调整成比例地改变其大小，以便能够保持在中心而不会显得不成比例。
回答by rolfsf
Try using absolute positioning, rather than relative positioning
尝试使用绝对定位，而不是相对定位
this should get you close - you can adjust by tweaking margins or top/left positions
这应该让你接近 - 你可以通过调整边距或顶部/左侧位置进行调整
#play_button {
position:absolute;
transition: .5s ease;
top: 50%;
left: 50%;
}
回答by Jonas Grumann
I'd use absolute positioning:
我会使用绝对定位：
#play_button {
position:absolute;
transition: .5s ease;
left: 202px;
top: 198px;
}
回答by Praveen
It seems some what center of the screen. So I would like to do like this
屏幕中央似乎有些什么。所以我想这样做
body {
background: url('http://oi44.tinypic.com/33tjudk.jpg') no-repeat center center fixed;
background-size:cover;
text-align: 0 auto; // Make the play button horizontal center
}
#play_button {
position:absolute; // absolutely positioned
transition: .5s ease;
top: 50%; // Makes vertical center
}
