如何堆疊和對齊表格單元格內的圖像？

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將它們輕推到位。