如何堆叠和对齐表格单元格内的图像？

Question

我希望把一个js模拟时钟表格单元格

#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; 
} 

手应垂直堆叠和细胞内的水平和垂直对齐内。 我试过position:fixed,position:absolute - 双手叠放但水平居中。

请参阅fiddle

Answer 1

这是很难看到的排列将如何工作了，因为我们不能看到相对的图像在你的提琴。

这可能是一点点接近你要找的内容使用PiLHA的小提琴： http://jsfiddle.net/fptAe/3/

随着含#tdClock中心对齐，您可以设置元素里面position: absolute或position: relative让您与它们堆叠适当的Z指数。

假设时钟图像的大小相同，都具有相同的中心，并且手围绕同一个轴旋转，您可以将#tdClock的尺寸专门定义为时钟图像的尺寸，并且应排列整齐。

如果图像尺寸不同，您必须使用left和right定位或margin将它们轻推到位。