How To Vertically Align Radio Buttons With Text On The Same Line?

Question

I wrote the HTML below to display two radio buttons and some text. Create the application name

Solution 1:

Demo

vertical-align: middle:

Aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

The problem seems to be caused by the fact browsers commonly add some random uneven margins to radio buttons and checkboxes.

Use inline style, weird but true:

<input type="radio" style="vertical-align: middle; margin: 0px;"> Label
    <br/>
    <br/>
    <input type="radio" style="vertical-align: middle; margin: 0px;"> Label
        <br/>
        <br/>
        <input type="radio" style="vertical-align: middle; margin: 0px;"> Label

Edit

this short explanation by Gavin Kistner, which is useful. I tried out the final suggestion on that page, which seems to render respectably in Chrome, IE, Firefox, Opera, and Safari.

What I did was add td{ line-height:1.5em }

Solution 2:

Not too clear what you're after specifically..but:

Demo Fiddle

Add:

input{
    vertical-align:top;
}

You may also want to chage this to vertical-align:middle;margin:0; depending on your requirements.

Solution 3:

Try it below code...

 input {float: left;
margin-top: 3px;}

Solution 4:

add style for input type as

input
{
    vertical-align: top;
}

and avoid the space in front of Create the Source name.

<input id="radio2"  type="radio"/> Create the  Source name

Solution 5:

 <input id="radio1"  type="radio"   checked="checked"/><label for="radio1">Create the application name</label> 
 <input id="radio2"  type="radio" /><label for="radio2">Create the application name</label> 

input,label{
       vertical-align: top;
}

FIDDLE DEMO

Html5 Developer