如何垂直居中 jqdatetimeinput jqwidget？

Question

我遇到了对齐问题。我很想将我的 datetimeinput 小部件从 jqWidget 垂直居中。我希望我的 datetimeinput 以页面为中心，然后在它的下方，我希望从选定的 datetimeinput 中看到一个居中的日期范围。

这是我到目前为止创建的图像：

我想将 datetimeinput 移动到文本上方的中心。我已经绘制了一个矩形来显示我想要移动它的位置：

这是我的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

这是我的 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>

任何帮助都会很棒！先感谢您！！！！如果我需要更详细的解释，请告诉我！！！

---

更新：

我明白了！！！这比我以前想象的要简单得多。 :)

fiddle of answer

Answer 1

我建议尝试用<div class="wrapper"> 替换已弃用的<center> 标记并添加.wrapper {text-align:vertical;}。对于#roomForStartDates，请添加margin: 0 auto;。这可能行得通。
小Demo-Fiddle

刚刚添加了第二个小提琴，因为我想将它与开始/结束日期一起使用： 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;
}  

剩下的问题是这是否对您有用，因为小部件中的 CSS 或 JS 可能会覆盖这些值，但这可以使用 Web 开发人员工具轻松检查，例如萤火虫。