水平居中元素没有小数点偏移？

margin: 0 auto将水平居中一个元素。但是，根据父级和子级大小，有时getBoundingClientRect会返回一个小数左值（与jQuery偏移量一样）。这些分数在javascript代码的其他地方会导致问题，所以我想删除它们（而不是补偿它们）。水平居中元素没有小数点偏移？

有没有办法使用CSS水平居中整数偏移？或者我应该只使用JavaScript？

有很多水平对齐问题，但没有一个似乎解决了这个问题的子像素困惑。

var br = document.getElementById("kid").getBoundingClientRect(); 
 

 
document.getElementById("info").innerHTML = "left: " + br.left;

body { 
 
    margin: 0; 
 
} 
 
#pop { 
 
    position: absolute; 
 
    width: 401px; 
 
    height: 100%; 
 
    background-color: pink; 
 
} 
 
#kid { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: orange; 
 
    margin: 0 auto; 
 
}

<div id="pop"> 
 
    <div id="kid"></div> 
 
    <div id="info">d</div> 
 
</div>

来源

2015-03-31 jedierikb

你能不能显示你的代码？ – 2015-03-31 17:47:54

getBoundingClientRect应该返回一个整数，没有像小数像素那样的东西。你使用CSS转换？ – kursus 2015-03-31 17:49:26

我不知道有一个“居中”div没有小数像素参与的机会......并且由于不同的浏览器有不同的子像素渲染方法，我肯定会用javascript来弥补。 – pschueller 2015-03-31 17:49:55

是的，你绝对可以使用整数！但是，除非您使用以整数度量的系统，否则您将遇到位置问题，因为它是最小的度量单位。有这样的单位吗？是!它们被称为像素，并且是可以用正整数（即整数）表示的正方形单位。只要确保你在CSS中引用了像素，而不是百分比或列跨度的数量，并且你将完全掌握你的内容......

来源

2015-03-31 18:13:53 user1789573

您可以重新定义Element.prototype.getBoundingClientRect，以便返回舍入数字。

这也将影响到jQuery方法依赖于它，如offset()，width()，并height()：

Element.prototype.getBoundingClientRect= function() { 
    var parent= this.parentNode instanceof HTMLElement ? this.parentNode : null, 
     left = Math.round(this.offsetLeft + (parent && parent.getBoundingClientRect().left)), 
     top = Math.round(this.offsetTop + (parent && parent.getBoundingClientRect().top)), 
     width = Math.round(this.offsetWidth), 
     height= Math.round(this.offsetHeight); 

    return { 
    left: left, 
    top:  top, 
    right: left+width, 
    bottom: top+height, 
    width: width, 
    height: height 
    } 
} //getBoundingClientRect

在this Fiddle，你会看到使用JavaScript和jQuery元素的分数尺寸。然后重新定义getBoundingClientRect。

单击该按钮，您将看到基于更新方法的圆角尺寸。

来源

2015-03-31 19:22:55

水平居中元素没有小数点偏移？

回答

相关问题