ansaurus

Question

margin to center with position fixed

Answer 1

A:

set margin-left & margin-right to auto.

Tony 2010-01-05 12:32:05

Uh, he's already doing that.

BalusC 2010-01-05 12:33:44

I also tyring that but it's not working.

saturngod 2010-01-05 12:36:35

Yes, Tony apparently didn't realize that `margin: 5% auto` basically means `margin-top and margin-bottom: 5%, margin-left and margin-right: auto`.

BalusC 2010-01-05 12:42:03

I did not realize it meant that, but thanks for letting me know! :)

Tony 2010-01-05 13:24:07

Answer 2

+3 A:

You basically need to set top and left to 50% to center the left-top corner of the div. You also need to set the margin-top and margin-left to the negative half of the div's height and width to shift the center towards the middle of the div.

Thus, replace your current margin: 5% auto; by:

top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;

BalusC 2010-01-05 12:39:37

I found that trick in http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/. But when I change the width and height, it's not moving center. Ya, I should change the margin-left and top when change height and width.

saturngod 2010-01-05 12:42:44

That's a quite good article. Maybe you should in the future try to **read** the article's text as well instead of blindly copypasting only the code .. ;)

BalusC 2010-01-05 12:49:56

Answer 3

A:

Or just add left: 0 and right: 0 to your original CSS, which makes it behave similarly to a regular non-fixed element and the usual auto-margin technique works:

.jqbox_innerhtml
{
  position: fixed;
  width:500px;
  height:200px;
  background-color:#FFF;
  padding:10px;
  border:5px solid #CCC;
  z-index:200;
  margin: 5% auto;
  left: 0;
  right: 0;
}

Note you need to use a valid (X)HTML DOCTYPE for it to behave correctly in IE (which you should of course have anyway..!)

Will Prescott 2010-01-05 12:53:16

Huh? This wouldn't work at all, regardless of the doctype. You're now dependent on the borders of the relative parent element.

BalusC 2010-01-05 13:03:04

In what sense? The parent element is the body element, which has no borders. If you added border properties to the body (?!) then sure it would be affected, as would the 50% technique I imagine. I assure you it works just fine with the given parameters, just verified in every browser I have handy, and has the added benefit of not being dependent on the width of the element.

Will Prescott 2010-01-05 13:26:10

With borders I didn't mean the CSS border property. Just the corners/ends of the element... Now you seem so certain, so I just tried to test it, but it sticked to left all the time. I think you'd better to present this in flavor of a SSCCE.

BalusC 2010-01-05 14:13:37

All I did was add those 2 properties and a doctype to the OP's example HTML. However on further testing it seems that IE7 (or 8 in compat mode) is the problem - it seems it does not respect the value of the `right` property if `left` is also set! ( http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx#positioning notes that `left` and `right` only have "partial" support in IE7). OK, I concede this solution is no good if IE7 support is important, but a great trick to remember for the future :)

Will Prescott 2010-01-05 16:00:04

ansaurus

tags:

views:

answers:

margin to center with position fixed

related questions