html - 对齐 div 内的单选按钮

Question

我有一个 div，在 div 里面有单选按钮，根据 div 内同一行中的文本垂直对齐单选按钮的最简单方法是什么

echo"<div  id=\"div{$id}\" ";?> 
                    echo"</br>

                    <input type= radio name=\"{$id}\" value=\"{$option1}\" >
                    $option1
                    </br>

                    <input type= radio name=\"{$id}\" value=\"{$option2}\">
                     $option2
                    </br>

                    <input type= radio name=\"{$id}\" value=\"{$option3}\">
                    $option3
                    </br>

                    <input type= radio name=\"{$id}\" value=\"{$option4}\">
                     $option4

                    </br></br>";
                    echo"</div>";

在上面的代码值取自 db，我想知道如何在同一行中垂直对齐 div 内的单选按钮。

Answer 1

像这样的样式单选按钮：

input[type="radio"] {
    margin-top: 0;
    vertical-align: middle;
}

Answer 2

你可以用一张桌子试试：

echo"<div  id=\"div{$id}\" ";?> 

echo"<br />
<table>
<tr>
<td>
<input type= radio name=\"{$id}\" value=\"{$option1}\" >
</td>
<td>
$option1
</td>
</tr>


<tr>
<td>
<input type= radio name=\"{$id}\" value=\"{$option2}\" >
</td>
<td>
$option2
</td>
</tr>

<tr>
<td>
<input type= radio name=\"{$id}\" value=\"{$option3}\" >
</td>
<td>
$option3
</td>
</tr>

<tr>
<td>
<input type= radio name=\"{$id}\" value=\"{$option4}\" >
</td>
<td>
$option4
</td>
</tr>

</table>
</br></br>";

echo"</div>";

Answer 3

您必须将它们放在表中以进行正确对齐...

echo"<div  id=\"div{$id}\" ";?> 
                echo"</br>
<table><tr>
                <td align=cente valign=middle><input type= radio name=\"{$id}\" value=\"{$option1}\" ></td><td align=center valign=middle>
                $option1</td></tr>

                <td align=cente valign=middle><input type= radio name=\"{$id}\" value=\"{$option2}\"></td></td><td align=center valign=middle>
                 $option2</td></tr>
                </br>

                <td align=cente valign=middle><input type= radio name=\"{$id}\" value=\"{$option3}\"></td><td align=center valign=middle>
                $option3</td></tr>
                </br>

                <td align=cente valign=middle><input type= radio name=\"{$id}\" value=\"{$option4}\"></td><td align=center valign=middle>
                 $option4</td></tr>

"; 回声"";