How to center and adjust size of jqwidget analog clock?

Question

I would like to set the height and width of the clock to fill up the following html td according to percentage values of the width (because the clock needs to have the same width and height to be a circle). Also, the clock isn't centering when I am trying to use the center tags. Can anyone recommend an other way to adjust the clocks dimension based on the td and to center the clock.

Thank you in advance, and please let me know if I need to explain if I was too vague!

Here is a link to the demo clock code from jqwidgets: http://jqwidgets.com/jquery-widgets-demo/demos/jqxgauge/index.htm#demos/jqxgauge/gauge-clock.htm

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

Answer 1

The <center> tag is basically ignored because the #clock div will take the entire width of the td.

Try ... removing the <center> and </center> and put ...

text-align:center;

... into the style of the #clock div.

I can't say this will work since I do not have access to it working with jqxGauge operating on the page.

UPDATE:

jqxGauge has options for width and height ...

$('#gauge').jqxGauge({ width: '20%', height: '30%', radius: '50%' });