Centering lables and input text boxes

Question

I have the following tag with input text fields with labels

<div>

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

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

</div>

and it looks like this

as you can see the labels for the text boxes are at the lower part of the text boxes. How do i set this so the labels are centered to the text boxes like below?

Answer 1

Vertical-align: middle is needed. If your input is a display:inline-block it works.

Answer 2

您可以向标签添加填充，将其与输入的高度对齐，因为您需要包括一个和内部的标签。