how to center jquery datepicker under textbox

Question

I have the following html:

<div id="datepicker-container">
  <div id="datepicker-center">
    <input type="text id="id_program_start_date"><div id="datepicker"></div>
  </div>
</div>

My CSS looks like:

#datepicker-container{
  text-align:center;
}
#datepicker-center{
  display:inline-block;
  margin:0 auto;
}

My javascript looks like:

<script>
  $(function() {
    $( "#datepicker" ).datepicker({
        dateFormat: 'MM d, yy',
        changeMonth: true,
        startDate: '08/24/2014',
        firstDay: 0,
        inline: true,
        altField: '#id_program_start_date',
    });
  });
  </script>

My calendar goes the left of the text input:

How do I make it center under the textbox?

Answer 1

1) You have a syntax error on the <input >, missing a " after "text

2) CSS is close, use:

#datepicker-container{
  text-align:center;
}
#datepicker-container #datepicker {
  display:inline-block;
}

JSBin