jquery - 修复了 Div 与 padding 和 text-align 交互的不同方式

Question

我的 parent div 有一个 child 。父级是粘性的，子级是 mainPicWrapper

CSS:

.mainPicWrapper {
    border:1px solid black;
    padding-left:25px;
 }

 #sticky-div.sticky {
    position: fixed;
    top: 0;
    border:0px;
 }

我有 jQuery 在页面加载时删除 .sticky 类。

然后，当它向下滚动到 div 的顶部时，它会添加 .sticky 类，所以 div 停留在向下滚动时显示在页面顶部，效果很好。

但是，如果我删除 padding-left:25px; 并将其替换为 text-align:center; 那么它就不起作用了。使用 text-align:center;，当我滚动时，div 突然跳到左边回到零。

为什么 padding-left 保持应用于粘性 div，但 text-align:center; 没有？

这是一个JSFiddle演示。

padding 的问题在于 div 中实际上有一个 img。并且图像经常改变大小。如果您在使用 padding 时滚动，那很好，图像会滚动到正确的位置。但是使用 padding 会导致多个尺寸的图像永远不会加载到 div 的中心，这正是我需要的。

Answer 1

你试过吗？

.mainPicWrapper {
border:1px solid black;
text-align:center;
}

#sticky-div.sticky {
position: fixed;
top: 0;
border:0px;
right:7px;
width:70%;
}
.topRightMainContainer {
border:1px;
width:70%;
position:absolute;
right:7px;
}

DEMO