How to align checkbox and label tag?

Question

Possible Duplicate:
How to align checkboxes and their labels consistently cross-browsers

I have this code:

<div id="form-footer">
    <ul>
       <li>
           <label for="test">Label text</label> 
           <input type="checkbox" name="" value="" id="test" />
       </li>
    </ul>
</div>

How can I align the label and the checkbox? At the moment I see the checkbox align on top with respect to the label, I would like to see it in the middle.

score 0 · Answer 1 · edited Feb 21 '12 at 15:43

0

if everything is one-line you could use the line-height property:

#form-footer li { height: 30px; line-height: 30px; /** same as height */ }

edited Feb 21 '12 at 15:43

Curt

94,964
60
257
340

answered Feb 21 '12 at 15:42

giorgio

9,517
2
25
40

score -2 · Answer 2 · answered Feb 21 '12 at 15:43

-2

input[type=checkbox] { vertical-align: middle; }

Or any of the vertical-align properties

answered Feb 21 '12 at 15:43

F.P

15,760
32
114
184

How to align checkbox and label tag?

2 Answers2