JQuery：日期选择器不居中

Question

我正在使用 JQuery 1.8.17，并且我正在使用 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;

}