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

的 Demo

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的
this short explanation，这很有用。我在该页面上尝试了最终建议，这似乎在Chrome，IE，Firefox，Opera和Safari中得到了很好的体现。

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

Answer 2

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

Demo Fiddle

添加：

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********/

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

6 个答案:

vertical-align：middle：

Demo Fiddle