javascript - jqwidgetアナログ時計のサイズを中央に配置して調整するには?

Question

時計の高さと幅を設定して、幅のパーセンテージ値に従って次の html td を埋めたいと思います (時計が円になるには同じ幅と高さが必要なため)。また、センター タグを使用しようとすると、時計が中央に配置されません。td に基づいてクロックの寸法を調整し、クロックを中央に配置する他の方法を推奨できる人はいますか。

前もって感謝します。あいまいすぎる場合は説明が必要な場合はお知らせください。

jqwidgets からのデモ クロック コードへのリンクは次のとおりです。

HTML

<td colspan="1" style="width: 26%; height: 250px;";>
  <center>
  <div id="clock" style="position: relative; height:250px;"> 
<div style="position: absolute; left: 0px; top: 0px;" id='seconds'></div>
<div style="position: absolute; left: 0px; top: 0px;" id='hours'></div>
    <div style="position: absolute; left: 0px; top: 0px;" id='minutes'></div>
  </div>
  </center>
</td>

Javascript

  //adding the clock

        var hours = new Date().getHours(),
        minutes = new Date().getMinutes(),
        seconds = new Date().getSeconds(),
        digits = {
            1: 'I',
            2: 'II',
            3: 'III',
            4: 'IV',
            5: 'V',
            6: 'VI',
            7: 'VII',
            8: 'VIII',
            9: 'IX',
            10: 'X',
            11: 'XI',
            12: 'XII'
        };
    $('#minutes').jqxGauge({
        ticksMinor: { visible: false },
        ticksMajor: { visible: false },
        labels: { visible: false },
        animationDuration: 0,
        min: 0, max: 12,
        border: { style: { fill: 'none', stroke: 'none'}, showGradient: false },
        caption: { value: '' },
        colorScheme: 'scheme05',
        style: { fill: 'none', stroke: 'none' },
        pointer: { length: '70%', width: '2%' },
        cap: { style: { fill: '#249dd6', stroke: '#249dd6'} },
        startAngle: -90,
        endAngle: 270,
        value: (minutes / 60) * 12
    });
    $('#hours').jqxGauge({
        ticksMinor: { visible: false },
        ticksMajor: { visible: false },
        labels: { visible: false },
        animationDuration: 0,
        min: 0, max: 12,
        caption: { value: '' },
        border: { style: { fill: 'none', stroke: 'none' }, showGradient: false },
        colorScheme: 'scheme05',
        pointer: { length: '50%', width: '3%' },
        style: { fill: 'none', stroke: 'none' },
        value: hours % 12 + (minutes / 60 * 11) / 12,
        startAngle: -90,
        endAngle: 270
    });
    $('#seconds').jqxGauge({
        ticksMinor: {
            interval: 0.2,
            size: '3%',
            style: {
                fill: '#aaaaaa',
                stroke: '#aaaaaa',
                'stroke-width': '2px'
            }
        },
        ticksMajor: {
            interval: 1,
            size: '8%',
            style: {
                fill: '#aaaaaa',
                stroke: '#aaaaaa',
                'stroke-width': '2px'
            }
        },
        ticksDistance: '10%',
        startAngle: -90,
        endAngle: 270,
        labels: {
            distance: '28%',
            interval: 1,
            formatValue: function (val) {
                if (val == 0) {
                    return '';
                }
                return digits[val];
            }
        },
        pointer: { length: '80%', width: '1.7%' },
        ranges: [],
        caption: { value: 'Time', offset: [0, -30] },
        animationDuration: 0, min: 0, max: 12,
        border: { fill: 'none', stroke: 'none' },
        colorScheme: 'scheme05',
        style: { fill: '#ffffff', stroke: '#cccccc' },
        value: (seconds / 60) * 12
    });
    setInterval(function () {
        var seconds = $('#seconds').jqxGauge('value'),
            minutes = $('#minutes').jqxGauge('value'),
            hours = $('#hours').jqxGauge('value'),
            ratio = 12 / 60;
        seconds += ratio;
        if (seconds > 12) {
            seconds = ratio;
        }
        $('#seconds').jqxGauge('value', seconds);
        if (seconds === ratio) {
            minutes += ratio;
            if (minutes >= 12) {
                minutes = ratio;
            }
            $('#minutes').jqxGauge('value', minutes);
            $('#minutes').jqxGauge('value', minutes);
            hours += 1 / 60;
            if (hours > 12) {
                hours = 1 / 60;
            }
            $('#hours').jqxGauge('value', hours);
        }
    }, 1000);





  //end of clock code