1

I'm attempting to create a nice looking droppable area for elements that align themselves to the center of a wrapper. I've got the whole drag drop bit working but was wondering if anybody knew a solution to the centering issue already.

All of the divs are exactly 320x240 (webcams) and have already got the initial css for the first element which centers nicely. Now what I'm looking for is when a new div is dropped within the area the existing one moves over to accomodate for the new one, all remaining as centered as possible.

When there are two divs I imagine they could be side by side, when there are three a kind of triangle with one up two down, four would look like 2 up 2 down etc.

I can't imagine this hasn't already been done, but looking for a jquery plugin etc has proved fruitless.

Any help is much appreciated! Thanks in advance

jhukdev
  • 3,051
  • 4
  • 30
  • 45
  • you should provide a demo to this issue and post some CODE here. Try create a demo on http://jsfiddle.net or on http://jsbin.com – Roko C. Buljan Sep 02 '11 at 09:52
  • Javascript can be kind of weird - simple problems like this, that have probably been solved 100 times in 100 different ways, often don't have any library code published on the web to do it for you. You may find that you have to write your own implementation (it shouldn't be too difficult, just time consuming.) – Oliver Sep 02 '11 at 09:56
  • Could also be done with css alone, But.. http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen – Joonas Sep 02 '11 at 09:57
  • Ok here's what i already have using css alone: http://jsfiddle.net/qLvDz/12/ – jhukdev Sep 02 '11 at 10:08
  • And here's an example of what I want to achieve but dynamically: http://jsfiddle.net/qLvDz/18/ So what I mean is when more divs are added they automatically center themselves without overlapping. Thanks – jhukdev Sep 02 '11 at 10:12

1 Answers1

1

how about something like the following http://jsfiddle.net/J7azG/1/

basically its:

wrapper{text-align:center;}
block{display:inline-block}
red-X
  • 5,014
  • 21
  • 37