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

Question

我编写了以下HTML代码以显示两个单选按钮和一些文本。

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

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

- user3494837

---

使用 display: inline-block 和 vertical-align: middle - Vangel Tzo

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 }

- 4dgaurav

---

尝试了相同的样式="vertical-align: middle; margin: 0px;"，但对齐不正确。我只应用了内联样式到输入框。 - user3494837

那么就一定有其他问题，这很明显。你是否为输入框、单选框或标签添加了任何CSS样式？ - 4dgaurav

同样的代码片段在我的页面中尝试，但对齐不正确。我认为表格行样式影响了内联样式。 - user3494837

Answer 2

不太清楚你具体想要什么，但是：

演示 Fiddle

添加：

input{
    vertical-align:top;
}

您可能还想根据您的要求将其更改为 vertical-align:middle;margin:0;。此内容与编程有关。

- SW4

---

我需要将单选按钮和文本在同一行中正确对齐。我的问题是单选按钮和文本不能在同一行中正确对齐。 - user3494837

我尝试了内联样式vertical-align:middle;margin:0;但是没有解决我的问题。 - user3494837

Answer 3

在下方尝试以下代码...

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

- Piyush Marvaniya

Answer 4

为输入类型添加样式

input
{
    vertical-align: top;
}

避免在创建源名称前面加空格。

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

- Deepu Sasidharan

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;
}

演示代码

- Tuhin

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

- Bhushan wagh