CSS中心元素哪个父元素比屏幕大
这是我的html:CSS中心元素哪个父元素比屏幕大,css,center,Css,Center,这是我的html: <div id="bar"> <div class="container"> <div class="item"></div> </div> </div> #酒吧是100%和溢出隐藏 .容器为1600px,边缘:0自动;把它放在中间。位置:相对位置 .项目为960像素,我想将此元素居中 当我的屏幕正好是1600px时,.项正确居中。但是当我把它变小的时候,.item会
<div id="bar">
<div class="container">
<div class="item"></div>
</div>
</div>
#酒吧是100%和溢出隐藏
.容器为1600px,边缘:0自动;把它放在中间。位置:相对位置
.项目为960像素,我想将此元素居中
当我的屏幕正好是1600px时,.项正确居中。但是当我把它变小的时候,.item会向右边移动更多。
看起来计算的边距始终是320px((1600-960)/2),并且是相对于.container计算的。但是浏览器会应用相对于视口的边距
有人知道当父对象不可见时,如何让浏览器应用其父对象的相对边距吗?我在JSFIDLE上给出了一个这样的示例,但使用了更小的尺寸,以便其可见。添加
页边距:0自动代码>到。项目应修复它
页边距:0自动不工作。由于定义了宽度,项目也会工作吗?如果不知道.item的内容(以及其他div,如果它们有其他内容的话),我就无法理解这个问题。你能提供一个例子来说明这个问题吗?当我的屏幕正好是1600px时,。项目正确居中。但是当我把它变小的时候,.item会向右边移动更多。这是因为DOM锚定在视口的左侧,溢出仅延伸到右侧之外。为什么指定1600px
?因为.item上的bij背景图像的宽度为1600px。所以在大屏幕上看起来很棒,但在结果介于1600和960之间的屏幕上,我不想要水平滚动条。我知道如何用javascript修复它,但我对CSS解决方案非常好奇。请参阅下面的jsfiddle()和注释。我已经更改了您是jsfiddle。所有96px盒都是“现场”。在绿色框中,我有一个大背景图像,但当屏幕小于160px时,我不想要滚动条;因此,我把100%和溢出隐藏的红色框。是的,这没有区别。当屏幕变小时,蓝色框不再位于视口的中心。。。