CODEWITHSUNDEEP
csshiddencentering
ecollis6
ecollis6

Reputation: 5817

How can I center align an element that is larger than 100% of the entire page?

I have a div width a with of 100% and hidden overflow holding a div with a width of 3000px. I want the 3000px div to be cut off evenly on the left and right. I would use background-position:center; however, it's more complicated than that. The 3000px div is holding 30 100px divs. I have tried using auto margins on the left and right of the 3000px div, but it did not work. Here is the css:

.bgAnimHolder{
    width:100%;
    height:500px;
    overflow:hidden;
    position:absolute;
    z-index:1;
    top:0px;
}

.row{
    margin: 0 auto 0 auto;
    height:500px;
    width:3000px;
}

.row div{
    width:100px;
    float:left;
    margin-top:0px;
}

How can I arrange the 3000px div to be positioned in the middle of the screen, regardless of screen resolution? I am willing to use CSS or JavaScript, whichever is necessary to solve the problem. Thanks!

Upvotes: 4

Views: 10633

Answers (2)

locrizak
locrizak

Reputation: 12281

You can do it with CSS:

.row {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -1500px; /* half of the width */
    height: 500px;
}

Just make sure the parent has a position: absolute/relative on it

Upvotes: 14

user164226
user164226

Reputation:

I may not be understanding the root of your issue, but you can set the left and right margins of a container to (the same) negative values. My code is simplified for brevity/clarity.

div.center 
{
    margin:1em -10em; 
    background:#CCC; 
    text-align:center; 
    padding:1em;
}
<div class="center">
    <p>Lorem ipsum dolor sit amet.</p>
</div>

Upvotes: 2

Related Questions