This is one of the minor CSS problems that plagues me constantly. How do folks around Stack Overflow vertically align checkboxes
and
If you use ASP.NET Web Forms you don't need to worry about DIVs and other elements or fixed sizes. We can align the <asp:CheckBoxList>
text by setting float:left
to the CheckboxList input type in CSS.
Please check the following example code:
.CheckboxList
{
font-size: 14px;
color: #333333;
}
.CheckboxList input
{
float: left;
clear: both;
}
.ASPX code:
<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>
The following gives pixel-perfect consistency across browsers, even IE9:
The approach is quite sensible, to the point of being obvious:
This results in a globally applicable general rule:
input, label {display:block;float:left;height:1em;line-height:1em;}
With font size adaptable per form, fieldset or element.
#myform input, #myform label {font-size:20px;}
Tested in latest Chrome, Safari, and Firefox on Mac, Windows, Iphone, and Android. And IE9.
This method is likely applicable to all input types that are not higher than one line of text. Apply a type rule to suit.
try vertical-align: middle
also your code seems like it should be:
<form>
<div>
<input id="blah" type="checkbox"><label for="blah">Label text</label>
</div>
</form>
Working off of One Crayon's solution, I have something that works for me and is simpler:
.font2 {font-family:Arial; font-size:32px} /* Sample font */
input[type=checkbox], input[type=radio] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
input[type=radio] {
bottom: 2px;
}
<label><input type="checkbox" /> Label text</label>
<p class="font2">
<label><input type="checkbox"/> Label text</label>
</p>
Renders pixel-for-pixel the same in Safari (whose baseline I trust) and both Firefox and IE7 check out as good. It also works for various label font sizes, big and small. Now, for fixing IE's baseline on selects and inputs...
Update: (Third-Party Edit)
The proper bottom
position depends on font-family and font-size! I found using bottom: .08em;
for checkbox & radio elements is a good general value. I tested it in Chrome/Firefox/IE11 in windows with Arial & Calibri fonts using several small/mid/large font-sizes.
.font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */
input[type=checkbox], input[type=radio] {
vertical-align: middle;
position: relative;
bottom: .08em; /* this is a better value for different fonts! */
}
<label><input type="checkbox" /> Label text</label>
<p class="font2">
<label><input type="checkbox"/> Label text</label>
</p>
One easy thing that seems to work well is to apply a adjust the vertical position of the checkbox with vertical-align. It will still be vary across browsers, but the solution is uncomplicated.
input {
vertical-align: -2px;
}
Reference
Use simply vertical-align: sub
, as pokrishka already suggested.
Fiddle
HTML Code:
<div class="checkboxes">
<label for="check1">Test</label>
<input id="check1" type="checkbox"></input>
</div>
CSS Code:
.checkboxes input {
vertical-align: sub;
}