使用JavaScript调整元素大小时如何刷新自动边距？

Question

I have a DIV in the center of my page which has margin-left and margin-right both set to auto. I want to be able to enlarge or shrink that DIV. Unfortunately when I do so, the position of it on the screen does not change, meaning that it is no longer centered.

<div id="content" style="margin-left:auto;margin-right:auto;width:240px">
  <p>Lots of text</p>
</div>

Meanwhile elsewhere:

$("#content").width(480);

At this point, I get my div no longer centered, but overbalanced to the right. Similarly if I set the width smaller than 240, it then becomes too far to the left.

How do I ensure that my margins actually adjust when the width changes? Needs to work in all modern browsers.

Answer 1

The div ist still centered. Just the text is aligned left.

Try this:

<div id="content" style="margin-left:auto;margin-right:auto;width:240px;border:1px solid red;text-align:center">
  <p>Click here</p>

$('p').click(function(){$("#content").width(480)})

- http://jsfiddle.net/nvzaw/1/

Answer 2

I have posted an answer to a similar problem (about window resize) here

Maybe this helps you!