在CSS中居中，当对象大于视口时 [英] Centering in CSS, when the object is larger than the viewport

问题描述

我想让一个jquery的旋转木马在屏幕上居中，即使剪辑区域比视口更宽。这将基本上总是给元素一个负左边距 - 我该如何指定？剪切区域是固定宽度，但是当然视口区域是可变的。

I'm trying to get a jquery carousel centered on the screen, even when the clipping area is wider than the viewport. This will basically always give the element a negative left margin -- how can I specify this? The clipping area is a fixed width but of course the viewport area is variable.

推荐答案

这是最好的解决方案找到在您的固定宽度内容周围使用一个包装元素，然后内容本身的-50％的margin。这是我的头顶，但它应该足以让你开始。这是代码片段：

Here's the best solution I've been able to find uses a wrapping element around your-fixed-width content, then a -50% margin on the content itself. This is off the top of my head, but it should be enough to get you started. Here's the code snippet:

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％，没有边距或填充。

Of course, this assumes that your div here is a direct descendant of the body tag, and that your browser specifies body to have a width of 100% and no margin or padding.

这篇关于在CSS中居中，当对象大于视口时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！