title: To set the alignment of a gauge highchart into a div tag of HTML
body: <p>I want to set the alignment of an element which is rendered into a Div tag of HTML.I have written my code using jquery to make a multi gauge highchart in which i have divided my div tag into 6 parts and m rendering my each  gauge highchart into one of the part of div tag but the alignment of the gauge inside a div tag is not proper not coming in center.Visit the URL to see my working code.</p>
  
  <p>Visit <a href="http://jsfiddle.net/8c7w84ac/3/" rel="nofollow">http://jsfiddle.net/8c7w84ac/3/</a></p>
  
  <p>here's my html and css part code..</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
          &lt;title&gt;Highcharts Example&lt;/title&gt;
           &lt;style type="text/css"&gt;
  
  #main{width:324px; height:205px; border:1px solid #ccc;}
  #main div{ float:left; width:105px; height:100px; border:1px solid #ccc;.centered-axis-xy ;}
  
  .actions, .chart {
          margin: 15px auto;
          width: 820px;
      }
      button {
          background: none repeat scroll 0 0 #E3E3E3;
          border: 1px solid #BBBBBB;
          border-radius: 3px 3px 3px 3px;
          box-shadow: 0 0 1px 1px #F6F6F6 inset;
          color: #333333;
          font: bold 12px;
          margin: 0 5px;
          padding: 8px 0 9px;
          text-align: center;
          text-shadow: 0 1px 0 #FFFFFF;
          width: 150px;
      }
      button:hover {
          background: none repeat scroll 0 0 #D9D9D9;
          box-shadow: 0 0 1px 1px #EAEAEA inset;
          color: #222222;
          cursor: pointer;
      }
      button:active {
          background: none repeat scroll 0 0 #D0D0D0;
          box-shadow: 0 0 1px 1px #E3E3E3 inset;
          color: #000000;
      }
  
  
           &lt;/style&gt;
  
          &lt;script type="text/javascript" src="../../js/jquery-1.6.4.min.js"&gt;&lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
      &lt;script src="../../js/highcharts.js"&gt;&lt;/script&gt;
      &lt;script src="../../js/highcharts-more.js"&gt;&lt;/script&gt;
      &lt;script src="../../js/modules/exporting.js"&gt;&lt;/script&gt;
      &lt;!-- Chart type switchers --&gt;
  &lt;!--&lt;div class="actions"&gt;
      &lt;button class="switcher" id="column"&gt;column&lt;/button&gt;
      &lt;button class="switcher" id="area"&gt;area&lt;/button&gt;
      &lt;button class="switcher" id="line"&gt;line&lt;/button&gt;
      &lt;button class="switcher" id="spline"&gt;Spine&lt;/button&gt;
      &lt;button class="switcher" id="areaspline"&gt;areaspline&lt;/button&gt;
      &lt;button class="switcher" id="pie"&gt;pie&lt;/button&gt;
  &lt;/div&gt;--&gt;
  &lt;div class="actions"&gt;
  &lt;select id='media' name='media'&gt;
      &lt;option value="line"&gt;line&lt;/option&gt;
      &lt;option value="bar"&gt;bar&lt;/option&gt;
      &lt;option value="pie"&gt;pie&lt;/option&gt;
      &lt;option value="sparkLine"&gt;sparkLine&lt;/option&gt;
      &lt;option value="gauge"&gt;gauge&lt;/option&gt;
      &lt;option value="area"&gt;area&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;/div&gt;
  
  
      &lt;!-- two different charts --&gt;
      &lt;!--&lt;div id="chart_1" class="chart" style="height:100px;width:200px;"&gt;&lt;/div&gt;
      &lt;div id="chart_2" class="chart" style="height:100px;width:200px;"&gt;&lt;/div&gt;--&gt;
  
      &lt;div id="main"&gt;
       &lt;div id="chart_1" align="center"&gt;1&lt;/div&gt;
       &lt;div id="chart_2" align="center"&gt;2&lt;/div&gt;
       &lt;div id="chart_3" align="center"&gt;3&lt;/div&gt;
       &lt;div id="chart_4" align="center"&gt;4&lt;/div&gt;
       &lt;div id="chart_5" align="center"&gt;5&lt;/div&gt;
       &lt;div id="chart_6" align="center"&gt;6&lt;/div&gt;
   &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>please check the alignment of each n every gauge.it should be placed in center.help me out please.All the 6 gauges should be equally aligned.</p>