jqdatetimeinput jqwidget을 수직으로 센터링하는 방법은 무엇입니까?

Question

정렬 문제가 있습니다. jqWidget에서 datetimeinput 위젯을 세로로 가운데에 배치하고 싶습니다. 내 datetimeinput을 페이지 중앙에 놓고 그 아래에 놓기를 원한다면, 선택된 datetime 입력으로부터 중앙에있는 날짜 범위를보고 싶습니다.

나는 datetimeinput을 이동하려는 텍스트 위에 중심되는 : 여기

는 내가 지금까지 만든 것을의 이미지입니다.

이

내 자바 스크립트입니다 : : 나는 그것을 이동하려는 어디 보여주기 위해 사각형을 그린

$(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 

그리고 이것은 내 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> 

어떤 도움 대단 할 것이다 !! 미리 감사드립니다 !!!! 좀 더 자세하게 설명해야한다면 알려주세요 !!!

---

는 UPDATE :

나는 그것을 알아 냈다! 이전에 생각했던 것보다 훨씬 간단했습니다. :)

fiddle of answer

Answer 1

나는 <div class="wrapper">으로 사용되지 않는 <center> 태그를 교체하고 .wrapper {text-align:vertical;}를 추가하려고하는 것이 좋습니다 것입니다. #roomForStartDates의 경우 margin: 0 auto;을 추가하십시오. 그것은 효과가있을 수 있습니다. 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; 
} 

질문에 남은 것은이 같은 당신을 위해 작동 할 수 있다면 그냥 :
작은 Demo- Fiddle

그리고 그냥 내가 시작 -/종료 날짜와 함께 그것을 가지고 싶어 두 번째 바이올린 원인을 추가 위젯의 CSS 또는 JS가 이러한 값을 덮어 쓸 수는 있지만, 예를 들어 웹 개발자 도구를 사용하여 쉽게 확인할 수 있습니다. 방화범.