当对象大于视口时,以CSS为中心

时间:2011-05-11 01:33:05

标签: css centering

即使裁剪区域比视口宽,我也试图在屏幕上居中显示jquery旋转木马。这基本上总是给元素一个负的左边距 - 我该如何指定呢?剪切区域是固定宽度,但视口区域当然是可变的。

1 个答案:

答案 0 :(得分:5)

这是我能找到的最佳解决方案,在您的固定宽度内容周围使用包装元素,然后在内容本身上使用-50%的边距。这不是我的头脑,但它应该足以让你开始。这是代码片段:

div.wrapper {
    position: absolute;
    left: 50%;
}
.content {
    position: relative;
    margin-left: -50%;
}

<div class="wrapper">
    <div class="content">JQUERY BIZ-NASS HERE</div>
</div>

当然,这假设您的div是body标记的直接后代,并且您的浏览器指定body的宽度为100%且没有边距或填充。