This is a basic CSS question, I have a radio button with a small text label after it. I want the text to appear centered vertically but the text is always aligned with the button of the radio button in my case.
<p><input type="radio" id="opt1" name="opt1" value="1" />A label</p>
Here is a Jsfiddle:
Any suggestions?
Thanks,
Alan.
You need to align the text to the left of radio button using float:left
input[type="radio"]{
float:left;
}
You may use label too for more responsive output.
I think this is what you might be asking for
CSS
label{
font-size:18px;
vertical-align: middle;
}
input[type="radio"]{
vertical-align: middle;
}
HTML
<span>
<input type="radio" id="oddsPref" name="oddsPref" value="decimal" />
<label>Decimal</label>
</span>
simple and short solution add below style:
style="vertical-align: text-bottom;"
This will give dead on alignment
input[type="radio"] {
margin-top: 1px;
vertical-align: top;
}
input.radio {vertical-align:middle; margin-top:8px; margin-bottom:12px;}
_x000D_
SIMPLY Adjust top and bottom as needed for PERFECT ALIGNMENT of radio button or checkbox
<input type="radio" class="radio">
_x000D_
HTML:
<label><input type="radio" id="opt1" name="opt1" value="1"> A label</label>
CSS:
label input[type="radio"] { vertical-align: text-bottom; }
You could also try something like this:
input[type="radio"] {_x000D_
margin-top: -1px;_x000D_
vertical-align: middle;_x000D_
}
_x000D_
<label class="child"><input id = "warm" type="radio" name="weathertype" value="warm" checked> Warm<br></label>_x000D_
<label class="child1"><input id = "cold" type="radio" name="weathertype" value="cold" checked> Cold<br></label>
_x000D_
You may try something like;
<p><input type="radio" id="oddsPref" name="oddsPref" value="decimal" /><span>Decimal</span></p>
and give the span a margin top like;
span{
margin-top: 4px;
position:absolute;
}
here is the fiddle http://jsfiddle.net/UnA6j/11/
Source: Stackoverflow.com