Html 对齐单选按钮及其标签

我现在快疯了，因为我花了好几个小时来尝试设计我的单选按钮，但我无法达到我的目标（我对css的世界完全陌生）

我想做的很简单：

我想要三个大单选按钮，它们在我的div中彼此居中，标签与按钮垂直对齐。类似于此：

我有以下html：

<div class="answers">
    <label>
        <input type="radio" name="answers" value="male" /> All
    </label>
    <label>
        <input type="radio" name="answers" value="female" /> Name
    </label>
    <label>
        <input type="radio" name="answers" value="male" /> Vendor No.
    </label>
</div>

全部的
名称
供应商编号。

结果是：

---

我想要更大的按钮和更大的文本。我希望文本在按钮的右侧加上一点填充。我希望所有单选按钮都居中。我尝试了很多东西，但一切都很奇怪。请帮助我。。。我开始讨厌css….

发生这种情况的唯一原因是在css中的某个地方向收音机显示

display:block

：

输入[类型=收音机]{
显示：块；
}

全部的
名称
供应商编号。

发生这种情况的唯一原因是要在css中的某个位置向收音机显示

display:block

：

输入[类型=收音机]{
显示：块；
}

全部的
名称
供应商编号。

将display:block添加到answers div中的标签，并向左浮动到输入。HTML也发生了变化

.answers label {
    display: block
}

.answers input[type="radio"] {
    float: left;
}

<div class="answers">
    <input type="radio" name="answers" value="male" /><label>All</label>
    <input type="radio" name="answers" value="female" /><label>Name</label>
    <input type="radio" name="answers" value="male" /><label>Vendor No.</label>
</div>

.answers标签{
显示：块
}
.应答输入[type=“radio”]{
浮动：左；
}
全部的
名称
供应商编号。

将display:block添加到answers div中的标签，并向左浮动到输入。HTML也发生了变化

.answers label {
    display: block
}

.answers input[type="radio"] {
    float: left;
}

<div class="answers">
    <input type="radio" name="answers" value="male" /><label>All</label>
    <input type="radio" name="answers" value="female" /><label>Name</label>
    <input type="radio" name="answers" value="male" /><label>Vendor No.</label>
</div>

.answers标签{
显示：块
}
.应答输入[type=“radio”]{
浮动：左；
}
全部的
名称
供应商编号。

您可以使用以下CSS：

.answers label {
  display: block;
  font-size: 20px;
  line-height: 30px;
  margin: 0 auto;
  width: 150px;
}
.answers {
  width: 100%;
}
.answers input[type="radio"] {
  height: 30px;
  line-height: 30px;
  vertical-align: bottom;
  width: 30px;
}

jsIDLE:

您可以使用以下CSS：

.answers label {
  display: block;
  font-size: 20px;
  line-height: 30px;
  margin: 0 auto;
  width: 150px;
}
.answers {
  width: 100%;
}
.answers input[type="radio"] {
  height: 30px;
  line-height: 30px;
  vertical-align: bottom;
  width: 30px;
}

---

---

---

JSFiddle:

也请发布你的CSS。因为疯狂，我删除了我的整个CSS！嗯，布局取决于CSS，您还没有发布CSS，但我打赌您的

输入

样式为

display:block对于我在上面发布的结果，我没有使用任何cs。div没有样式，因此标签和输入都没有样式。这是我仅仅使用htmlPost你的CSS得到的标准结果。我删除了我的整个CSS是因为疯狂！嗯，布局取决于CSS，您还没有发布CSS，但我打赌您的
输入
样式为
display:block对于我在上面发布的结果，我没有使用任何cs。div没有样式，因此标签和输入都没有样式。这是我使用htmlno得到的标准结果。我没有任何css的div，标签和输入！你使用外部css文件吗？像bootstrap？不。我现在有没有任何css的纯html。这只是一个文件。请检查我的建议解决方案。否。我没有任何css的div，标签和输入！你使用外部css文件吗？像bootstrap？不。我现在有没有任何css的纯html。这只是一个文件。检查我的建议解决方案。我不希望所有单选按钮都在一行！但这又不是我想要的。文本未垂直居中于单选按钮。。。。这就是我讨厌css的原因…更新了我的提琴，这就是你想要的吗？这很好，但如果我增加标签文本的字体大小，它就不会与单选按钮垂直对齐。我不希望所有单选按钮都在一行！但这又不是我想要的。文本未垂直居中于单选按钮。。。。这就是我讨厌css的原因…更新了我的提琴，这就是你想要的吗？这很好，但是如果我增加标签文本的字体大小，它就不会与单选按钮垂直对齐。有了css，文本仍然在单选按钮下。@Mulgard更新了我的答案。你在使用哪个浏览器？谷歌浏览器：如果我使用你的代码，它看起来不像你的JSFIDLE。文本未与收音机垂直对齐buttons@Mulgard这可能是因为anwers div的宽度。我已经用一个类更新了我的答案以设置宽度（但可能不是）。你说过你没有CSS，对吧？你能发布完整的HTML吗？（我刚刚用一个本地文件在chrome上试用过，它看起来和小提琴一样）请将
.answers输入[type=“radio”]{float:left；width:30px；height:30px；}
添加到你的js小提琴上，看看会发生什么。有了这个css，文本仍然在单选按钮下。@Mulgard更新了我的答案。你在使用哪个浏览器？谷歌浏览器：如果我使用你的代码，它看起来不像你的JSFIDLE。文本未与收音机垂直对齐buttons@Mulgard这可能是因为anwers div的宽度。我已经用一个类更新了我的答案以设置宽度（但可能不是）。你说过你没有CSS，对吧？你能发布完整的HTML吗？（我刚刚用一个本地文件在chrome上试用过，它看起来和小提琴一样）请将
.answers输入[type=“radio”]{float:left；width:30px；height:30px；}
添加到你的js小提琴上，看看会发生什么。