Centering an oversized Div element using jQuery
I've got Div element which is 1680px wide, like this:
| |
Say, the actual screen/browser canvas resolution is 800px wide:
+ +
Now, how do I center the Div (and hide the rest) using jQuery so that the rest of the 1680px goes hidden, like this:
| + + | ^^^^^ ^^^^^^ ^ = clipped from the Div.
In other words, I want the Div the be shown within those two + range and hide the rest. If the actual screen resolution is bigger that 1680px, the the Div should be centered normally without any clipping.
I'm not sure if I was able to explain this dilemma perfectly, so ask away if something is unclear. T开发者_如何学编程his has been driven me mad already...
Use CSS
only:
http://jsfiddle.net/rQfvs/
The key part being:
#bigdiv {
position: relative;
width: 1680px;
margin-left: -840px;
left: 50%;
}
Note that you do not necessarily need the container
div, either. You can simply put the bigdiv
in the main body. I would set the body's overflow to hidden as well in this case:
http://jsfiddle.net/rQfvs/3/
精彩评论