Css:px与%没有相同的效果

时间:2014-04-21 12:15:09

标签: javascript jquery html css css3

我正在尝试将元素放在屏幕的中心。 当我使用时:

this.css("position","fixed");
this.css("top", "50%");
this.css("left", "50%");

enter image description here

它有效,但是当我使用

this.css("position","fixed");
this.css("top", $(window).height()/2+"px");
this.css("left", $(window).width()/2+"px");

enter image description here

它不起作用!(它将元素相对于我认为也位于第一个元素的右下方)

我做错了什么?

这是我捐赠按钮的代码:

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

3 个答案:

答案 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)

http://jsfiddle.net/eW6rs/3/

.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已建议的类。