Vertically aligning text next to a radio button

Question

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 b

Answer 1

Used to this

    input[type="radio"]{
    vertical-align:top;
    }
p{
    font-size:10px;line-height: 18px;
}

Demo

Answer 2

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/

Answer 3

simple and short solution add below style:

style="vertical-align: text-bottom;"

Answer 4

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.