How to vertically center a jqdatetimeinput jqwidget?

Question

I am having alignment issues. I would love to vertically center my datetimeinput widget from jqWidget . I want my datetimeinput to be centered to the page and then underneath it, I would like to see a centered date range from the selected datetimeinput.

Here is an image of what I have created so far:

I want to move the datetimeinput to be centered above the text. I have drawn a rectangle to show where I want to move it:

This is my javascript:

 $(document).ready(function () {



                var today = new Date();
                var dd = today.getDate()-1;
                var mm = today.getMonth(); //January is 0!
                var yyyy = today.getFullYear();


                $("#roomForStartDates").jqxDateTimeInput({ width: 300, height: 30, selectionMode: 'range', min: new Date(2014, 6, 15), max: new Date(yyyy, mm, dd) });
                $("#roomForStartDates").on('change', function (event)
                    {
                    var selection = $("#roomForStartDates").jqxDateTimeInput('getRange');
                     if (selection.from != null)
                      {
                        $("#roomForEndDates").html("<center><div>From: " +selection.from.toLocaleDateString() + " <br/>To: " + selection.to.toLocaleDateString() + "</div></center><br><br>");
                        alert("Selection: "+selection.from.toLocaleDateString() + " to "+selection.to.toLocaleDateString());
                      }


                });

              if(dd<10) {
                 dd='0'+dd;
               }

               //if today is the first of the month
                if(dd =='00'){
                //month is last month and day is last day of prevous month and fix year
                 var LastDayPrevMonth = new Date(yyyy, mm, 0).getDate();
                 dd = LastDayPrevMonth; //days in last month
                 mm--; //last month is now updated to be this month
                if(mm < 0)
                  { // if jan 1st then do december of last year
                     yyyy--;
                     mm=11;
                     dd=31;
                  }
                }


               if(mm<10) {
                 mm='0'+mm;
               }



                //today = mm+'/'+dd+'/'+yyyy;
                //alert(today);
                var date1 = new Date();
                date1.setFullYear(yyyy, mm, 1);
                var date2 = new Date();
                date2.setFullYear(yyyy, mm, dd);
                $("#roomForStartDates").jqxDateTimeInput('setRange', date1, date2);




      });//end document

And this is my HTML:

<center>
    <div id="roomForStartDates" style='margin-top: 10px; font-size: 13px; font-family: Verdana;'></div>
     <br>
     <div id="roomForEndDates" style='margin-top: 10px; font-size: 13px; font-family: Verdana;' ></div>
</center>

Any help would be great!! Thank you in advance!!!! If I need to explain something in greater detail, then please let me know!!!

---

UPDATE:

I figured it out!!! It was much simpler than I had previously thought. :)

fiddle of answer

Answer 1

I'd suggest to try to replace the deprecated <center> tag with a <div class="wrapper"> and add .wrapper {text-align:vertical;}. For #roomForStartDates add margin: 0 auto;. That could work.
Small Demo-Fiddle

And just added a second Fiddle cause I wanted to have it together with the Start- / Enddate: Fiddle with calendar and copy

<div class="wrapper">
 <div class="calendar"></div>
 <div class="startDate">From September 3rd</div>
 <div class="endDate">To October 23rd</div>
</div>

.wrapper {
  text-align:center;
}
.calendar {
 height:200px;
 width:200px;
 margin:0 auto;
}  

Remaining question is just if this could work for you as it's possible that the CSS or JS from the widget can overwrite these values, but this can be checked easily using web developer tools like e.g. Firebug.