html - 对齐单选按钮及其标签

Question

我现在快要疯了，因为我花了好几个小时尝试设置我的单选按钮的样式，但我无法实现我的目标(我对 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...

Answer 1

你可以使用这个 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:http://jsfiddle.net/ghorg12110/uqyfbjsb/