JQuery：Datepicker没有居中

Question

我正在使用JQuery 1.8.17，我正在使用datepicker。我有一切正常，因为我想要它在功能上但由于某种原因，datepicker没有与中心对齐，因为datepicker的标签是（我已经在边缘附加了一个边框，所以你可以看到文本居中，但是datepicker不是

我希望标签和日期选择器都居中。这是我正在使用的代码

JS

$("#reportsStartDate").datepicker({
             dateFormat: "dd-MM-yy",
             maxDate: -1,
             setDate: new Date(),
             onSelect: function (date) {
                 var date2 = $('#reportsStartDate').datepicker('getDate');
                 date2.setDate(date2.getDate() + 1);
                 $('#reportsEndDate').datepicker('setDate', date2);
                 //sets minDate to reportsStartDate date + 1
                 $('#reportsEndDate').datepicker('option', 'minDate', date2);
             }
         });

         $('#reportsEndDate').datepicker({
             dateFormat: "dd-MM-yy",
             maxDate: 0,
             onClose: function () {
                 var reportsStartDate = $('#reportsStartDate').datepicker('getDate');
                 console.log(reportsStartDate);
                 var reportsEndDate = $('#reportsEndDate').datepicker('getDate');
                 if (reportsEndDate <= reportsStartDate) {
                     var minDate = $('#reportsEndDate').datepicker('option', 'minDate');
                     $('#reportsEndDate').datepicker('setDate', minDate);
                 }
             }
         });

HTML

<span style="border-style: solid; border-width: medium;   display:inline-block; margin:0 auto;">

            Start Date:
            <input  type="date" id="reportsStartDate">

            End Date:
            <input type="date" id="reportsEndDate">

 </span>

之前是否有人遇到此问题或知道发生了什么事，因为我无法在任何地方找到解决方案？

修改

当我使用

时

input{
    vertical-align: middle !important;
}

字段没有任何反应，但是当我使用

时

input{
    vertical-align: bottom !important;
}

这是结果

Answer 1

尝试按以下方式设置输入的高度（对布局使用正确的尺寸）。

文本将在垂直中心对齐。

快速举例：

https://jsfiddle.net/yssg8mu6/3/

input{
    background-color: red;
    line-height: 60px;
    heightL 60px;

}