修复偏心的无线电文本

Question

我正在尝试在heroku上进行调查web​​app（主要是javascript），这些单选按钮上的偏离中心文本相当烦人。什么是一种简单的方法来将它居中并将其滑到侧面一点点？格式化现在都是用CSS完成的。目前我如何格式化这些无线电输入就是这样....

.radio-input{
    background: #D4E7ED;
    padding:20px 10px;
}

Answer 1

您可以在标签上使用vertical-align: middle，使用标签上的padding-top: 1% 单选按钮，以便对齐文字和广播按钮：

label {
    vertical-align: middle;
    padding-top: 1%;
}
.rdo{
    vertical-align:middle;
}

<强> DEMO

Answer 2

这是我使用Coder概述的类似方法创建的示例。它包括您指定的背景颜色，它包含div中的单选按钮和文本。它对我来说似乎表现得很好：

css：

.radio-input {
    padding-top:20px;
    vertical-align:top;
}
.radio-input-text {
    vertical-align:bottom;
}
.background {
    background: #D4E7ED;
    width:300px;
}

HTML：

<div class="background">
    <div class="radio-input">
        <input type="radio" value="Great" id="Great" /><span class="radio-input-text">Great</span>
    </div>
    <div class="radio-input">
        <input type="radio" value="Okay" id="Okay" /><span class="radio-input">Okay</span>
    </div>
    <div class="radio-input">
        <input type="radio" value="Very Bad" id="VeryBad" /><span class="radio-input">Very Bad</span>
    </div>
</div>

Demo