Comment centrer verticalement un jqwidget jqdatetimeinput?

Question

J'ai des problèmes d'alignement. J'aimerais centrer verticalement mon widget datetimeinput de jqWidget. Je veux que mon datetimeinput soit centré sur la page et ensuite, en dessous, je voudrais voir une plage de dates centrée à partir de l'entrée datetime sélectionnée.

est ici une image de ce que j'ai créé à ce jour:

Je veux déplacer le datetimeinput être centré au-dessus du texte. J'ai dessiné un rectangle pour montrer où je veux déplacer:

Ceci est mon 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 

Et voici mon 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> 

Toute aide ce serait génial !! Merci d'avance!!!! Si j'ai besoin d'expliquer quelque chose de plus en détail, alors s'il vous plaît faites le moi savoir !!!

---

MISE À JOUR:

I figured it out !!! C'était beaucoup plus simple que je ne le pensais auparavant. :)

fiddle of answer

Answer 1

Je vous suggère d'essayer de remplacer l'étiquette <center> dépréciée avec un <div class="wrapper"> et ajouter .wrapper {text-align:vertical;}. Pour #roomForStartDates ajouter margin: 0 auto;. Cela pourrait fonctionner.
Petit démo- Fiddle

Et vient d'ajouter une deuxième Fiddle parce que je voulais avoir ensemble avec le Démarrer-/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; 
} 

restant question est juste si cela pourrait fonctionner pour vous il est possible que le CSS ou JS du widget puisse écraser ces valeurs, mais cela peut être vérifié facilement en utilisant des outils de développement web comme par exemple Pyromane.