html - CSS单选按钮问题

我正在整理一个简单的表格来存入一定数量的钱。该表格有4个单选按钮。

<form action="deposit.php" method="post"> <fieldset> <div class="form-group"> <input type="radio" name="deposit" value="100"> $100 <br> <input type="radio" name="deposit" value="250"> $250 <br> <input type="radio" name="deposit" value="500"> $500 <br> <input type="radio" name="deposit" value="1000"> $1,000 <br> </div> <div class="form-group"> <button type="submit" class="btn btn-default">Deposit</button> </div> </fieldset></form>

这是输出：


您会看到最后一个单选按钮未垂直对齐。我意识到按钮后面的文本中还有2个额外的字符。我不是CSS向导，也没有真正找到使这些按钮变直的答案。有任何想法吗？

编辑：CSS代码在这里：

.container {
    /* center contents */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

input[type='radio'] {
    width: 20px;
}

表格在容器中

最佳答案

在CSS文件或HTML代码中，您使用的是“居中对齐”设置。那就是为什么不对齐。

这是您上面的代码与align center设置的输出：



这是没有对齐中心设置的代码输出：



您在代码中的某个位置将以下div类设置为居中对齐。

 // Removing the align setting will solve the issue. If its not in-line CSS then check you external CSS file.
 <div class="form-group" align="center">

希望这可以帮助。