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将其缩小到位。

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

1 个答案: