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

Question

我有一个 parent div 和一个 child。 parent是置顶，child是mainPicWrapper

CSS:

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

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

我有 jQuery 删除页面加载时的 .sticky class。

然后，当它向下滚动超过 div 的顶部时，它会将 .sticky class 添加回来，因此 div 停留在 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

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

Fixed Div interacts with padding and text-align differently

css

jquery

layout