如何居中並調整jqwidget模擬時鐘的大小？

Question

我想根據寬度的百分比值設置時鐘的高度和寬度以填充以下html td（因爲時鐘需要具有相同的寬度和高度才能成爲一個圓）。另外，當我嘗試使用中心標籤時，時鐘不居中。任何人都可以推薦其他方式來調整時鐘維度基於td和中心的時鐘。

預先感謝您，如果我需要解釋我是否太模糊，請告訴我。

這裏是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

的<center>標籤基本上是忽略，因爲＃時鐘格將採取td的整個寬度。

嘗試...取出<center>和</center>，把...

text-align:center; 

...到＃時鐘div的風格。

我不能說這會工作，因爲我無法訪問它在頁面上運行的jqxGauge。

UPDATE：

jqxGauge具有寬度和高度選項...

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