我正在尝试将元素放在屏幕的中心。 当我使用时:
this.css("position","fixed");
this.css("top", "50%");
this.css("left", "50%");
它有效,但是当我使用
时this.css("position","fixed");
this.css("top", $(window).height()/2+"px");
this.css("left", $(window).width()/2+"px");
它不起作用!(它将元素相对于我认为也位于第一个元素的右下方)
我做错了什么?
这是我捐赠按钮的代码:
.donate-button {
display: table;
height: 400px;
width: 400px;
border-radius: 50%;
background: #CC0000;
margin: auto auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.donate-text{
display: table-cell;
vertical-align: middle;
text-align: center;
font-family: 'Sniglet', cursive;
font-size: 100px;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
}
答案 0 :(得分:1)
是因为你把容器的左上角放在50%......你通常应该这样做:
this.css("margin-top", -(this.css("height").replace("px","")*0.5));
this.css("margin-left", -(this.css("width").replace("px","")*0.5));
所以它会回到中心
我将它更改为JS以适合您的答案,但实际上您应该创建一个css类:.fixed-to-center
或具有所有这些CSS属性的东西,然后应用类this.addClass("fixed-to-center");
:)
答案 1 :(得分:1)
好的,我不想留下这个答案:
我认为你并没有以正确的方式接近这个,请查看这个小提琴,看一个更简单的方法来消除任何JS问题(以及所有JS也是如此:P)
.thing {
position: absolute;
background: rgba(100,100,255,0.5);
height: 80px;
width: 120px;
top: 50%;
left: 50%;
margin-left: -60px;
margin-top: -40px;
}
.thing.left {
right: auto;
left: -140px;
margin-left: 0;
}
.thing.top {
top: -100px;
margin-top: 0;
}
.thing.right {
right: -140px;
left: auto;
}
.thing.bottom {
top: auto;
bottom: -100px;
}
基本上,我们的想法是放置你的东西"进入按钮容器,然后根据它的位置定位它们:)
答案 2 :(得分:0)
在我看来,当您调整浏览器大小时,图像会偏离中间位置。如果是这样,那么你应该考虑在调整大小时触发相同的功能。
检查此代码:
function makeItCenter(e) {
var main = $(e.currentTarget || e);
main.css({
"position": "fixed",
"top": "50%",
"left": "50%",
"marginLeft": -main.width() / 2 + "px",
"marginTop": -main.height() / 2 + "px"
});
}
var main = $('.main');
makeItCenter(main);
main.on('resize', makeItCenter);
<强> Working Fiddle 强>
对于常见样式,请在其他答案中添加@ simey.me已建议的类。