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

enter image description here

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?

enter image description here

take look here: http://stackoverflow.com/questions/4466596/css-how-to-align-vertically-a-label-and-input-inside-a-div — Akul Von Itram, Jul 06 '15 at 08:25
I crerated a fiddle wtih this code and on chrome labels and inputs are vertically centered — Laurent S., Jul 06 '15 at 08:25
Please include all the relevant CSS as well as HTML that replicates your issue. — Hidden Hobbes, Jul 06 '15 at 08:28
inspect for `line-height, margins, paddings` these causes the issue and should be used properly. — Jai, Jul 06 '15 at 08:42

score 0 · Answer 1 · edited Jul 06 '15 at 13:08

0

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

edited Jul 06 '15 at 13:08

depperm

10,606
4
43
67

answered Jul 06 '15 at 08:29

Marcos Pérez Gude

21,869
4
38
69

score -2 · Answer 2 · answered Jul 06 '15 at 08:26

-2

You can add padding to the labels align it with the same height as that of inputs for that you need to include say a and inside that give your labels.

answered Jul 06 '15 at 08:26

A B Vijayanth

1

Centering lables and input text boxes

2 Answers2