javascript - 查询 : Datepicker not centered

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;

}