开发者

Centering in CSS, when the object is larger than the viewport

开发者 https://www.devze.com 2023-03-04 04:22 出处:网络
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 alway开发者_如何学编程s give the element a negative left margin

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 alway开发者_如何学编程s 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.


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>

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消