Change width of a DIV along central vertical axis

I have a container with a bunch of absolutely positioned DIV elements, and I am working on a script that creates a shrinking animation effect using setInterval.  During each interval, a method is called that decreases the width of the DIV by 1, until it reaches 0, then does the opposite until it reaches its original size.

The problem is that I cannot seem to get the DIVs to shrink to the middle.  They will only shrink to the left.  Here is the relevant setInterval code that shrinks the DIV (the code to grow it back again is the same with the sign changed):

          var cur_w = parseInt( block.style.width );
          cur_w -= 10;
          if( cur_w < 0 )
           cur_w = 0;
          block.style.width = cur_w + "px";

and here is the css stuff for both the container and the DIVs themselves.

.block-container{

  margin-left: auto;
  margin-right: auto;
  position:absolute;
  text-align:center;
  top:0px;
  left:0px;
}

.block{

  width:100px;
  height:100px;
  position:absolute;
 
}

The DIVs are set up in a table-less way, so they need to be absolute.  How do I get them aligned in such a way as to have them shrink along the center axis as opposed to the left side axis????

Thanks in advance...

=russ
wmethlieAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LeeKowalkowskiCommented:
A more complete example would help me better.

For now, it seems your blocks are absolutely positioned, you'd have to increment the style.left by half your width decrement to do that (although incrementing left by .5 would not work if you're passing it through parseInt() on the next cycle).

If your blocks are centered, they just need margin:auto instead.

--
Lee
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
wmethlieAuthor Commented:
thanks for the help.  there really is no way to center an absolutely positioned element along its y-axis.  In Flash you can set the axis to any point, and my goal with this project was to do as much as I could without Flash, but obviously there are limitations.  Your solution worked, but is too "expensive" to be practical in most circumstances, so I'm going back to the drawing board.

Thanks again.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.