有人问我为什么要这样做,让我直接告诉你.那样你们中的一个聪明的窥视可以告诉我一个更好的方法…
我正在画一幅绘画的观众,这些绘画应该能够拉伸来填满页面,90％的屏幕高度是精确的.我想将画作一个一个地淡化,并将每个画面放在屏幕的中央.
为了使画面相互淡化,我需要将它们定位为“绝对”,以阻止它们的堆叠.这里是麻烦来了.自从我将它们设置为绝对值之后,我用来集中包含div的所有方法都没有起作用.
问题的一部分是,我没有为画画设置任何宽度,因为我希望他们动态调整大小以填充用户屏幕的90％.
我已经找到了数百种绝对内容中心的方法,并相信我可能需要收缩包装的div.不过我还没有成功.
HTML的
<div id="viewer_div">
<img src="" id="first" />
<img id="second" class="hidden"/>
</div>
样式表
#viewer_div {
width:1264px;
}
img {
height:90%;
display:block;
margin-left: auto;
margin-right:auto;
}
上面给了我想要的效果,但不允许我将图像定位为绝对的.任何人都可以提出以图像为中心的方式,但也允许我在另一方面褪色？
解决方法
使用JavaScript来计算宽度并移动它,
使用CSS黑客将元素左右移动50％
或者不要绝对定位.
这个答案是非常短暂的,但正是这一点.如果您需要某些内容集中(意味着您希望浏览器确定中心点在哪里,并将其定位在那里),那么您将无法使用绝对定位 – 因为它会从浏览器中消除控制.
To fade the paintings in over each other I need to position them
‘absolute’ to stop them from stacking.
这是你的问题所在.你假设你需要绝对定位错误的原因.
如果您将元素放置在彼此顶部时遇到问题,请将图像包装在绝对定位的容器中,该容器的宽度为100％,并且具有text-align：center
如果您确实需要绝对定位,则可以使用以下hack来实现所需的结果：
div {
position: absolute;
/* move the element half way across the screen */
left: 50%;
/* allow the width to be calculated dynamically */
width: auto;
/* then move the element back again using a transform */
transform: translateX(-50%);
}
显然,上述黑客有一个非常糟糕的code smell,但它在一些浏览器上起作用.请注意：对于其他开发人员或其他浏览器(尤其是IE或移动设备)来说,此黑客未必是明显的.
