How to stack and align images inside a table cell?

Question

I want to place a js analog clock inside a table cell

#table02{
    width:100%;
}
#tdLogo02{
    background:#ff0000;
    width:17%;
}
#tdClock{
    text-align:center;  
}
.hands{
    border:thin solid red;
}
#hour {
    z-index: 1;
}
#min {
    z-index: 2;
}
#sec {
    z-index: 3;
}

hands should be stacked vertically and aligned both horizontally and vertically inside a cell. I tried with position:fixed, position:absolute - hands are stacked but not centered horizontally.

Please see the fiddle

Answer 1

It's difficult to see how the alignment would work out since we can't see the relative images in your fiddle.

This might be a little closer to what you're looking for using PiLHA's fiddle: http://jsfiddle.net/fptAe/3/

With the containing #tdClock center aligned you can set the elements inside to position: absolute or position: relative allowing you to stack them with the proper z-index.

Assuming the clock images are the same size, all have the same center, and the hands rotate around the same axis, you could define the dimensions of #tdClock specifically to the dimensions of the clock images and things should line up.

If the images are different sizes you'll have have to nudge them into place using left and right positioning, or margin.