Right-Align and Vertical Align label with checkbox/radio button CSS
16,287
This could be what you needed:
label, input {vertical-align: baseline;}
Both element with the same property, will help. Also baseline works similar. middle works different in IE7.
Hope it helps!
Author by
Jon
Updated on June 04, 2022Comments
-
Jon almost 2 years
I'm very close and have this working in Safari, Firefox and IE8, however IE7 the labels and radio buttons do not align vertically.
My HTML is:
<div id="master-container"> <fieldset id="test"> <legend>This is a test of my CSS</legend> <ul class="inputlist"> <li> <label for="test1">Test 1</label> <input name="test1" id="test1" type="checkbox" disabled="disabled"/> </li> <li> <label for="test2">Test 2</label> <input name="test2" id="test2" type="checkbox" disabled="disabled"/> </li> </ul> </fieldset> </div>
My CSS Is:
html { font-family:Arial,Helvetica,sans-serif; } #master-container { width:615px; font-size:12px; } ul.inputlist { list-style-type:none; } ul.inputlist li { width:100%; margin-bottom:5px; } ul.inputlist li label { width:30px; text-align:right; margin-right:7px; float:left; }
EDIT:
Based on the suggestion to check the rest of my html and css. I updated the code above and now it accurately demonstrates the problem. If I takefont-size
out of#master-container
it lines up but then it is not the proper font-size. I tried to add afont-size
toul.inputlist li input
but that didn't help. Any suggestions? Thanks for your help everyone! -
Jon about 14 yearsHi Allan, thanks for the suggestion, but unfortunately it didn't work. Any other ideas?
-
Jon about 14 yearsThanks for the suggestion, but this didn't work either. Any other ideas?
-
attack about 14 yearsWhen I tested the markup/CSS above, it doesn't work for me in Firefox (but it does in IE7), so I feel like there must be something else going on. Is there more markup/CSS? Another possible solution is to add more to margin-bottom, say 20px or so.
-
Allan Kimmer Jensen about 14 yearsI found this: stackoverflow.com/questions/306252/… i hope it can help you!
-
Jon about 14 yearsI added the code that is causing the problem. Thanks for your suggestion!
-
Jon about 14 yearsHi Allan, I had to take out a *{margin:0px;padding:0px;} I had, give the ul.inputlist li a line-height of 18px and then use vertical-align:baseline on the label. Thanks!!!!!!!!!