如何在同一行上将单选按钮与文本垂直对齐？

Question

我在下面写了HTML来显示两个单选按钮和一些文本。

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

我的问题是单选按钮和文本没有正确对齐。 单选按钮显示在文本下方一点点。 如何将单选按钮和同一行上的文本对齐并正确对齐？

Answer 1

演示

vertical-align：middle：

将框的垂直中点与父框的基线加上父框的x高度的一半对齐。

问题似乎是由于浏览器通常会向单选按钮和复选框添加一些随机不均匀的边距。

使用内联样式，奇怪但真实：

<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

编辑

这是Gavin Kistner的简短解释 ，这很有用。 我在该页面上尝试了最终建议，这似乎在Chrome，IE，Firefox，Opera和Safari中得到了很好的体现。

我做的是添加td{ line-height:1.5em }

Answer 2

不太清楚你具体是什么。但是：

演示小提琴

加：

input{
    vertical-align:top;
}

您可能还希望将此变为vertical-align:middle;margin:0; 根据您的要求。

Answer 3

尝试下面的代码......

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

Answer 4

为输入类型添加样式

input
{
    vertical-align: top;
}

并避免创建源名称前面的空格。

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

Answer 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

Answer 6

    <form >
          <label>
            <input name="radiobutton" type="radio" value="radiobutton" />
            Man</label>
     <label><br>
            <input name="radiobutton" type="radio" value="radiobutton" />
            Women</label>
        </form>



/******this will help you********/