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

Curtis

101,612
66
270
352

answered Feb 21 '12 at 15:42

giorgio

10,111
2
28
41

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

17,421
34
123
189

How to align checkbox and label tag?

2 Answers2