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

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-index 堆叠它们。

假设时钟图像的大小相同，都具有相同的中心，并且指针围绕相同的轴旋转，您可以将#tdClock 的尺寸专门定义为时钟图像的尺寸并且事物应该对齐。

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