Jquery 如果一个水平居中的元素在Chrome中不精确，如何判断它的准确位置？

一幅画和一把小提琴胜过千言万语：

慢慢地调整窗口的大小，偶尔会看到条纹背景不对齐。我正在控制台中记录位置，这一点都没有改变。但从视觉上看确实如此

Chrome将水平居中的元素（使用

文本对齐：居中；

）与另一个水平居中的元素（使用

边距：0 auto；

）对齐，使其环绕外观位置，从而产生视觉变化。它不会反映在我使用jQuery的

.position（）

为元素获取的位置中

基本上，这个问题在Firefox/Safari中并不存在，在某种程度上在IE上也存在（在我的应用程序中，它不会引起问题），但在Chrome上非常突出

我需要一种方法来获取或计算这个位置，或者禁用这个行为，或者一种解决方法，使背景不错位，同时保持所有内容居中

<div class="box">
    <div class="centered good">
        This is just fine! :)
    </div>
    <br/>
    <div class="centered bad">
        This is not :(
    </div>
</div>

<script type="text/javascript">
    .box {
        width: 313px;
        height: 206px;
        background: url('data:image/gif;base64,R0lGODlhAgABAIAAACmd/////ywAAAAAAgABAAACAkQKADs=');
        position:relative;
        margin: 0 auto;
        text-align: center;
    }
    .centered{
        display: inline-block;
        color: black;
        padding: 5px;
        background: url('data:image/gif;base64,R0lGODlhAgABAIAAACmd/////ywAAAAAAgABAAACAkQKADs=');
        font-size:15px;
    }
</style>

这很好！：）


这不是：(
.盒子{
宽度：313px；
高度：206px；
背景：url（'data:image/gif；base64，r0lgodlhagabaiaacmd/////ywaaakakqkads='）；
位置：相对位置；
保证金：0自动；
文本对齐：居中；
}
.居中{
显示：内联块；
颜色：黑色；
填充物：5px；
背景：url（'data:image/gif；base64，r0lgodlhagabaiaacmd/////ywaaakakqkads='）；
字体大小：15px；
}

如果您将字体大小更改为偶数，它似乎可以解决此问题。我将宽度更改为

314px

在修改后的小提琴中，它应该是

313px

，两行开始移动。更改字体大小或框的宽度不是一个选项，因为这是人们根据其字体外观偏好使用的插件的一部分。T框是一个图像，文本是其标题。