title: how to center jquery datepicker under textbox
body: <p>I have the following html:</p>
  
  <pre><code>&lt;div id="datepicker-container"&gt;
    &lt;div id="datepicker-center"&gt;
      &lt;input type="text id="id_program_start_date"&gt;&lt;div id="datepicker"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS looks like:</p>
  
  <pre><code>#datepicker-container{
    text-align:center;
  }
  #datepicker-center{
    display:inline-block;
    margin:0 auto;
  }
  </code></pre>
  
  <p>My javascript looks like:</p>
  
  <pre><code>&lt;script&gt;
    $(function() {
      $( "#datepicker" ).datepicker({
          dateFormat: 'MM d, yy',
          changeMonth: true,
          startDate: '08/24/2014',
          firstDay: 0,
          inline: true,
          altField: '#id_program_start_date',
      });
    });
    &lt;/script&gt;
  </code></pre>
  
  <p>My calendar goes the left of the text input:
  <img src="https://i.stack.imgur.com/p5t9S.png" alt="enter image description here"></p>
  
  <p>How do I make it center under the textbox?</p>