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> 

Кто-нибудь сталкивался до или знать, что происходит, как я не могу найти решение в Интернете в любом месте?

EDIT

Когда я использую

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; 

}