Log in

View Full Version : Centering absolute div horizontally?


pxlcreations
07-10-2010, 07:54 PM
Hey guys, I have a question about centering an absolute div. I have multiple divs set up like this:


<div id="div1" class="draggable">

<!--Content Start -->
<span id="clock">*</span>
<!--Content End -->

</div>
and my CSS goes like this:


.draggable{
z-index: 1000;
display:none;
margin:0 auto;
}

#div1 {
height:219px;
width:252px;
color:black;
}

And the DIVs get dragged around the page via JavaScript but it needs it to be absolute positioning. So I don't know how to keep those divs all centered in the screen using the code above.

Thank you!
jscheuer1
07-10-2010, 08:15 PM
#div1 {
height:219px;
width:252px;
color:black;
left: 50%;
margin-left: -126px;
top: 50%;
margin-top: -110px;
}

If you only want to center horizontally, skip the top and margin-top declarations. Once you start moving them around, you will probably want to set the margins to 0.
pxlcreations
07-10-2010, 08:47 PM
Ok, I tried that and its now pushing it mostly off the page. In the JS you helped me with I had to set the relative to absolute because when it was at relative, the positions of the divs were not saved correctly. Once it was changed to absolute, they were in the right positions but they were no longer centered because margin:0 auto; doesn't apply to absolute positioning. Maybe the JS code needs some adjustments to make it work with relative?
azoomer
07-10-2010, 09:12 PM
Had to delete this. It was only a repetition of an earlier statement.
liamallan
07-10-2010, 09:45 PM
not 100% sure this will work, but u could try anyway.


#div1 {
height:219px;
width:252px;
margin-left: auto;
margin-right: auto;
color:black;
}
pxlcreations
07-10-2010, 10:14 PM
not 100% sure this will work, but u could try anyway.


#div1 {
height:219px;
width:252px;
margin-left: auto;
margin-right: auto;
color:black;
}

Yeah, that only works on block, relative, and I think static positioning.
jscheuer1
07-11-2010, 02:15 AM
#div1 {
height:219px;
width:252px;
color:black;
left: 50%;
margin-left: -126px;
top: 50%;
margin-top: -110px;
}

If you only want to center horizontally, skip the top and margin-top declarations. Once you start moving them around, you will probably want to set the margins to 0.


Ok, I tried that and its now pushing it mostly off the page. In the JS you helped me with I had to set the relative to absolute because when it was at relative, the positions of the divs were not saved correctly. Once it was changed to absolute, they were in the right positions but they were no longer centered because margin:0 auto; doesn't apply to absolute positioning. Maybe the JS code needs some adjustments to make it work with relative?

That's how to center absolutely positioned elements.

I was thinking though, you also have:



.draggable{
z-index: 1000;
display:none;
margin:0 auto;
}

That might take precedence. Best to get rid of that, since we are trying to override it anyway.

In any case, what I've told you is true. Try this stand alone example page that illustrates the effect:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#div1 {
position: absolute;
height: 219px;
width: 252px;
color: white;
background-color: blue;
left: 50%;
margin-left: -126px;
top: 50%;
margin-top: -110px;
}
#div1 div {
padding: 10px;
}
</style>
</head>
<body>
<div id="div1">
<div>
Greetings from Asbury Park!
</div>
</div>
</body>
</html>

Or navigate to this demo:

http://home.comcast.net/~jscheuer1/side/center_div/

The fact that it's not working out for you on your page probably indicates that something else is going on there, perhaps a container with relative or absolute position, or a conflict of styles as mentioned at the beginning of this post.

It could of course also be something else, or something else in combination with one or more of the possibilities I've already mentioned.
pxlcreations
07-11-2010, 11:02 AM
That's how to center absolutely positioned elements.

I was thinking though, you also have:



That might take precedence. Best to get rid of that, since we are trying to override it anyway.

In any case, what I've told you is true. Try this stand alone example page that illustrates the effect:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#div1 {
position: absolute;
height: 219px;
width: 252px;
color: white;
background-color: blue;
left: 50%;
margin-left: -126px;
top: 50%;
margin-top: -110px;
}
#div1 div {
padding: 10px;
}
</style>
</head>
<body>
<div id="div1">
<div>
Greetings from Asbury Park!
</div>
</div>
</body>
</html>

Or navigate to this demo:

http://home.comcast.net/~jscheuer1/side/center_div/

The fact that it's not working out for you on your page probably indicates that something else is going on there, perhaps a container with relative or absolute position, or a conflict of styles as mentioned at the beginning of this post.

It could of course also be something else, or something else in combination with one or more of the possibilities I've already mentioned.

Tried it again and it's still moving the div so about 3/4 of it is off the page. How ever if the .draggable part's CSS is like this:


.draggable{
z-index: 1000;
display:none;
position:absolute;
right:40%;
}

Most of it seems to be in the middle of the page.
jscheuer1
07-11-2010, 12:46 PM
Check my demo:

http://home.comcast.net/~jscheuer1/side/center_div/

You will see that it works perfectly.

As I say, if you have other styles (scripted or otherwise) and/or a nesting of elements that conflict, then you will need to make other arrangements. However, this is the way to center an absolutely positioned element.

And, just in case anyone wants to know how, instead of just the one demo -

What you do is set the left and the top to 50% and then set the margin-left to negative half the width of the element, and the margin-top to negative half the height of the element.

This will center an absolutely positioned element it in its container.

That's what you were asking about, right?

I'm guessing that initialization of the .draggable class may be what's messing this up for you. Doesn't that kill all the margins?
pxlcreations
07-11-2010, 01:16 PM
I'm guessing that initialization of the .draggable class may be what's messing this up for you. Doesn't that kill all the margins?

That is probably true. .draggable goes for every div that is going to be dragged around the page, so if I was to just set a default like left:50%;right:50%;, since each div is a different size, the would be in different positions on the screen. If only margin:0 auto; worked with absolute positioning :D
jscheuer1
07-11-2010, 04:26 PM
If it is killing the margins, hmm. If you want them centered to begin with, in your document ready thing that initializes them, you could tweak the css there. You don't have to use margin, that's just to compensate for the width when doing it all in pure css without javascript. With javascript, you can calculate things. But if the display is none, the width calculation may be off. Best to keep display: block; - You can use visibility: hidden; - it's virtually the same for an absolutely positioned item. If you need display none (like for later fading effects), you can switch it out and back.

You could do something like:


var ww = $(window).width();
$('.draggable').each(function(){
var d = $(this), w = d.outerWidth();
d.css({visibility: 'hidden', display: 'block'}).css({left: (ww - w) / 2 + 'px'})
.css({display: 'none', visibility: 'visible'});
});