Question

I have an effect that when you hover over this one particular area, it raises it from the bottom, rotates the images, and scrunches them together. It is supposed to emulate “fanning out” a hand of playing cards. It all works well and good except I need them to be centered. The only way I can think how to do that is to measure the farthest corner on each side, but I don’t know how to do that. Anyone have any suggestions? I’m using jQuery 1.7.

Link to example: http://aws.redemptionconnect.com/redemption/play.html

Answer 1

Instead of using javascript to calculate screen widths, it is much easier to become a little creative with margin: auto

First, give the cards a predefined left value depending on the cards position in the stack.

Then we calculate the width of #outer-hand wrapper. Once we have the proper width, the margin defined to auto will automatically center the cards to the desired position!

Take a look at this:

http://jsfiddle.net/JE7gf/