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

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- 手是堆叠的，但不是水平居中的。

请看小提琴

Answer 1

由于我们无法在您的小提琴中看到相对图像，因此很难看到对齐的效果。

这可能更接近您使用 PiLHA 的小提琴寻找的内容：http: //jsfiddle.net/fptAe/3/

通过包含#tdClock中心对齐，您可以将内部元素设置为position: absolute或position: relative允许您使用适当的 z-index 堆叠它们。

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

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