0

表のセル内に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- 手は積み重ねられていますが、水平方向に中央に配置されていません。

フィドルを見てください

4

1 に答える 1

1

フィドルで相対的な画像を見ることができないため、配置がどのように機能するかを確認するのは困難です。

これは、PiLHA のフィドルを使用して探しているものに少し近いかもしれません: http://jsfiddle.net/fptAe/3/

含ま#tdClockれている中心を揃えて、要素を内部に設定しposition: absoluteたりposition: relative、適切な z-index でそれらを積み重ねたりすることができます。

時計の画像が同じサイズで、すべて同じ中心を持ち、針が同じ軸を中心に回転すると仮定すると、特に時計の画像の寸法に#tdClock合わせて の寸法を定義でき、物事が整列するはずです。

画像のサイズが異なる場合は、 と を使用しleftてright配置するか、またはmargin.

于 2013-08-06T18:05:15.580 に答える